Como centrar Horizontalmente una pagina (solucionar problema de Internet Explorer 6)

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:

El CSS:

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:

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:

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

9 comments

  1. Pingback: Problemas Comunes en CSS con Internet Explorer 6, 7 y Firefox | Blog de la Web

  2. Ignacio

    Muchas gracias por tu ayuda!!!!

    Buen Tip!

    Que tengas buen día…
    …………………..

    Para los navegantes me sirvió la solución 2
    Cabe destacar que hay que ajustar el width al ancho que necesite tu web.

    y ubicar en el archivo header.php

    y en el footer.php

    En los archivos de tu theme de WordPress.

    Saludos y abrazos!

  3. gracias la verdad excelente el que me funciono fue el de poner absolute y los px en negativo los otros no pero valen tambien segui asi!!!

  4. Oscar

    Gracias!!! La solución 2 me funcionó a las mil maravillas en todas las versiones de Explorer.

  5. dacho

    |Author

    Jajajja.. totalmente de acuerdo… De todos modos creo que justamente internet explorer es la encarnacion de una estrategia basada en monopolio de Microsoft… Gracias a dios ya se les cayo el reinado en ese sentido….

    No estaba mal hecho porque si… La idea desd emi punto de vista es que era la forma de hacer que muuuchas paginas webs se vean mal con LOS OTROS EXPLORADORES… Exisitian muchas paginas solo hechas y probadas en IE…

    Hay otros errores de internet explorer (como la mal suma de margenes) que quizas si son un error de programacion xD…

    Por suerte es un navegador obsoleto hoy en dia… Muy poco le queda….

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">