Centrando Horizontalmente (a prueba de IE)

9/abr/2007 2

Existen 2 maneras para centrar elementos HTML, ambas muy conocidas y difundidas. Con CSS, centrar un elemento depende de sí mismo:

Elementos lineales

Estos elementos son los que no son en formato bloque, como <span> e imágenes <img>. Para centrarlos, se utiliza la propiedad text-align dentro del contenedor que lo alberga:

<div id="container">
     <span>Texto centrado</span>
</div>

#container {
     text-align: center;
}

Elementos bloque

Estas etiquetas son las que por defecto son considerados block, como <h1>, <div>, <p>, etc. Para centrarlos, basta con definir automático en su margen derecho e izquierdo. Para el mismo ejemplo HTML anterior:

#container {
     margin-left: auto;
     margin-right: auto;
}

o lo que es lo mismo:

#container {
     margin: 0 auto;
}

Un detalle es que estos elementos bloque por defecto tienen un ancho de 100%, por lo que no se centrarían a menos que definamos un ancho menor que éste, sea porcentual o en pixeles.

#container {
     margin: 0 auto;
     width: 50%;
}

SafariFirefoxInternet Explorer 6Internet Explorer 7OperaCaminoFlock

Como nada es perfecto y es de suponerse, IE hace lo que quiere. En doctype no estricto o estándar, considera los elementos en bloque como elemento línea, con lo que centrarlo con margin no es tomado en cuenta. Lo que se debe hacer es mezclar ambas técnicas, dándole al elemento contenedor (puede ser hasta el mismo <body>) un alineado de texto, además de centrarlo horizontalmente con márgenes automáticos. Pero claro, este alineado central de texto será heredado por todos sus elementos interiores (#container, <p>, etc) por lo que debemos volver a decirle al div#container que vuelva a alinear todo en su interior a la izquierda o justificado. Finalmente:

body {
     text-align: center;
}

#container {
     margin: 0 auto;
     width: 50%;
     text-align: left;
}

Esto debería de solucionarse desarrollando en XHTML strict, incluso HTML standart (y definiéndolo explícitamente en el <head>), pero con 2 líneas de código podemos anticiparnos a posibles errores.

Ver resultado final

Links:

Comentarios

  1. fearlex [#]

    Excellente, ya lo sabia, pero me sirvio para re-enforzar detalles, buen post.

    Gracias una vez mas 😀

  2. eduardo [#]

    cundo vuelven los podcast de css lab. muy buen tutorial

Deja tu Comentario

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

CSSLab