Centrar contenido de una página utilizando DIV

CSS, HTML 28 abril, 2010

Para centrar el contenido de una página utilizando el TAB Div debes primero crear un DIV que rodee (envuelva) a todo el contenido de la página que quieras centrar, centrar con relación a la ventana del navegador.

Agrega un Tab DIV y ponle un identificador único, en el ejemplo “contenedor”, para incluirlo en el archivo .css que estés utilizando para los estilos de la página.

<div id="contenedor">
<!-- Contenido a centrar -->
</div>

Luego, en el archivo .css correspondiente agregar el código siguiente

#contenedor{
margin: 0 auto;
width: 900px;
}

El atributo "margin: 0 auto;" es el que se encarga de centrar el contenido, el 0 (cero) hace referencia al margen superior, si se prefiere otro valor no habrá ningún problema. La palabra “auto” es el que, específicamente se encarga del centrado, lo que en este caso está diciendo es que los demás márgenes que restan ( izquierdo, inferior, derecho) se toman con valores automáticos (margenes variables de acuerdo al tamaño de la ventana del navegador). El atributo "width:900px;" es un atributo que se debe incluir para lograr el centrado, un valor de 100% ó no incluir “width” hará que el contenido no quede centrado, coloque el valor que sea necesario de acuerdo al ancho final de su página.

Éste código deberá funcionar en los navegadores actuales que sigan las recomendaciones estándar de la W3C. Pero, IE no reconoce éste código, por lo que se tendrá que recurrir a un FIX, utilizaremos text-align:center; para ésto, aplicando el atributo al elemento “body” en el archivo .css correspondiente. Éste error se suponía estaría corregido desde IE7, pero aún no veo solucionado el problema ni en el IE8.

/*FIX IE*/
body{
text-align:center;
}

Este cambio provoca, por defecto, que todo el texto quede con alineación centrada. Para corregir esto, sólo se debe agregar text-align:left; al identificador del DIV que utilizamos al comienzo, “contenedor” en el caso del ejemplo. Utilizando “left”, “right” o “justify” de acuerdo a como definió su diseño, quedando el código como sigue:

#contenedor{
margin: 0 auto;
width: 900px;
text-align: left; /*right or justify*/
}

Deja un comentario