14 marzo 2010 in XHTML/CSS by dacho

Bueno comenzaremos nuestra seccion de Errores de CSS con uno de los problemas mas comunes en el diseño de una web con CSS. ¿Como hacer para Centrar una pagina web y que funcione en todos los malditos navegadores :) ? Bueno, basicamente existen varias formas de hacer esto, pero en este caso dare 2 formas, las dos igual de efectivas, pero una es mas ingeniosa que la otra.

Primero veamos el problema:

La forma correcta de centrar una pagina web es colocando al div que contiene toda la pagina la propiedad margin: 0 auto 0 auto; (osea en este caso le pusimos 0 margen superior y inferior, pero podemos poner cualquier valor ahi) y asignandole algun ancho (width) menor que el tamaño del monitor o de lo contrario no podemos centrar algo que es mas grande que la pantalla. Cualquier navegador que respete los estandares de CSS de la W3C, centrara la pagina correctamente, pero por supuesto nuestros amigos de Microsoft han decidido omitir algunas cosillas y en Internet explorer 6, esta solucion no funciona. Simplemente veremos la pagina a la izquierda como si no hubieramos puesto nada para que se centre.

Solucion 1: Utilizando la propiedad text-align: center;

Bueno esto parece sin duda algo desprolijo, porque utilizar una propiedad para centrar texto para centrar toda una pagina no parece ser lo correcto, pero bueno es una solucion y de hecho es una de las mejores y mas intuitivas. Como sa hace?

Bueno para solucionar esto, se utiliza un div que contiene toda la pagina o toda la seccion de la pagina que se quiere centrar, normalmente llamado wrapper (contenedor en ingles), y a este se le asigna un text-align: left;, y al elemento superior al Wrapper se le asigna un text-aling: center;. Esto lo que hace es centrar el div wrapper pero luego le indicamos que todos los elementos del wrapper se centren como siempre a la izquierda, un ejemplo puede ser:

El HTML:

 
<body>
<div id="wrapper">
 
Aqui el contenido de la pagina...
 
</div>
</body>
[..]

El CSS:

body{ text-aling: center; }
 
#wrapper{ text-aling: left; width: 900px;  }

Esta solucion es una de las mas faciles de utilizar…

Una solucion sencilla (y general que funciona!) para arreglar el problema es incluir estas lineas en el codigo CSS:

body { text-align: center; } /*hace que todo lo que haya en el body se centre*/
body * { text-align: left; }  /*hace que todo lo que contiene lo que haya en el body se vuelva a colocar a la izquierra :)*/

Solucion 2: Utilizar position Absolute.

Esta es una solucion mas que interesante y elegante, se trata de que si queremos centrar una pagina web, creamos un elemento wrapper, y a este le asignamos que tanga posicion absoluta, le decimos que se coloque a la mitad de la pagina (left: 50%;) y que luego se corra la mitad del tamaño de ancho en negativo con el margin-left:, en fin coloco el codigo para que se entienda mejor:

#wrapper {
position: absolute;
left: 50%; /* se coloca a la mitad de la pagina */
width: 750px; /*el div tiene un ancho de 750px*/
margin-left: -325px; /* Corremos el margen izquierdo a la mitad del width en negativo */
}

Esta solucion funciona perfectamente tambien!… Si tenes alguna duda te invito a que la comentes! y espero haya sido util esta solucion a errores de Internet Explorer 6

Entradas Relacionadas: