domingo, 24 de octubre de 2010

Centrar con Css un Div HTML


Uno de los elementos básicos para realizar un sitio web, es crear la plantilla del sitio, muchas veces es necesario centrar de forma horizontal elementos "div" dentro de su contenedor, para esto CSS proporciona un metodo muy efectivo que consiste en configurar las propiedades "margin-left: auto; margin-right: auto; " para el elemento contenido, o "margin: 0px auto;" para configurar ambos a la vez


por ejemplo


<div style="background-color: grey;">
<div style="background-color: green; margin: auto; width: 50%;">
contenido
</div>
</div>




contenido





debido a la incompatibilidad de algunos navegadores, también a veces es necesario usar la propiedad "text-align:center" en el contenedor para centrar un objeto, (internet explorer).


<div style="text-align:center; background-color: grey;">
<div style="background-color: green; width:50%;">
contenido
</div>
</div>




contenido



y finalmente como opción menos recomendada la antigua pero aun efectiva etiqueta "center"


<div style="background-color: grey;">
<center>
<div style="background-color: green; width: 50%;">
contenido
</div>
</center>
</div>







contenido