Centrado de div

ajr784 · 03-ago-2012, 16:43

Ésta semana me surgió una duda, siempre pensé que para centrar un div era necesario que en el css el body tenga el text-align en center. Ejemplo:

Código:

<html>
<head>
    <title>Hola mundo</title>
    <style type='text/css'>
        body {
            text-align: center;
        }
        #content {
             border: 1px solid red;
             margin: auto;
             width: 600px;
        }
     </style>
<body>
    <h1>Hola mundo</h1>
</body>
</html>

Claro que ahí Hola mundo también sale centrado, facilito, agregamos al content text-align como left.

Aquí lo interesante. No es necesario hacer que el body tenga el text-align: center, la magia la hace margin: auto. Ahora algo más interesante IE6 si body no tiene center, no centra el div

.

Que mal... Ok, quién en su sano juicio pensaría en IE6 en éstos días... también es cierto, pero soy un bicho intrigado en aprender cómo arreglar (boludeces) como éstas. Se me cruzó una solución:

Código:

<html>
<head>
    <title>Hola mundo</title>
    <style type='text/css'>
        body {
            text-align: center;
        }
        body * {
             text-align: left;
        }
        #content {
             border: 1px solid red;
             margin: auto;
             width: 600px;
        }
     </style>
<body>
    <h1>Hola mundo</h1>
</body>
</html>

El body * lo que dice es todo elemento dentro de body debe estar alineado a la izquierda. En si, una tontera, pero centramos los div incluso en IE6.

Herramientas
Mostrar Versión Imprimible Enviar por Correo
Desplegado
Mode Lineal Cambiar a Modo Hibrido Cambiar a Modo Hilado