Centrado con CSS (1): Horizontal
En HTML 3 y las variables transicionales de HTML 4 y XHTML 1 había cierto número de elementos que aceptaban el atributo align. Su resultado dependía del elemento al que se aplicase y no tiene traducción a CSS.
En CSS la forma de centrar un elemento dependerá del elemento en si mismo:
1. Elementos en Línea
Entendemos como contenido en línea algunos elementos como el texto y las imágenes.
Para centrar el contenido en línea se utiliza la propiedad text-align aplicada al contenedor en bloque que lo contiene. Por ejemplo, para el siguiente ejemplo de código:
<div id="ejemplo">
<span>Texto centrado </span>
</div>
el CSS sería algo así:
#ejemplo {
text-align: center;
}
2. Elementos en Bloque
Entre los elementos en bloque están los elementos h1, div, table, p…
Para centrar un elemento en bloque simplemente debemos establecer el valor auto a sus margenes izquierdo y derecho. Para el siguiente ejemplo:
<div id="ejemplo">
<span>Texto </span>
</div>
El CSS sería:
#ejemplo {
margin-left: auto;
margin-right: auto;
}
No obstante, por defecto, el ancho de los elementos en bloque es auto, es decir, abarcan el 100% del espacio disponible en pantalla por lo que centrado es exactamente igual que alineado a la izquierda.
Si quieres que un bloque se vea centrado deberás darle un valor de width (ancho). El CSS quedaría:
#ejemplo {
width: 50%;
margin-left: auto;
margin-right: auto;
}
3. Contenido en Línea y el Bloque Contenedor
Al centrar el elemento en bloque, el elemento en línea sigue estando alineado a la izquierda (por defecto).
Si queremos centrar un bloque y, a su vez, centrar el elemento dentro de este bloque deberemos hacer algo así:
#ejemplo {
width: 50%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
4. El Explorer y los Contenedores en Bloque
Lamentablemente, el navegador más extendido, no trata correctamente los elementos en bloque en lo referente al centrado. Los considera como elementos en línea y, por tanto, el contenedor que queremos centrar deberá estar contenido en otro al que aplicaremos el valor text-align: center;. Por ejemplo:
<div id="centrado">
<div id="ejemplo">
<span>Texto </span>
</div>
</div>
#centrado {
text-align: center;
}
Esta alineación del texto es heredada por todos los elementos contenidos en el bloque, por tanto si queremos que el texto esté alineado a la izquierda deberemos indicarlo explícitamente:
#ejemplo {
width: 50%;
margin-left: auto;
margin-right: auto;
text-align: left;
}
Recuerda que este “truco” sólo funciona en Internet Explorer y, por tanto, sigue siendo necesario indicar el centrado horizontal de la forma habitual
Este artículo es una traducción algo abreviada de http://dorward.me.uk/www/centre/
Para centrar elementos horizontalmente sigue leyendo:
Centrado con CSS (2): Vertical
Otras entradas
Esta entrada fue publicada por Alma Fernández el Tuesday, 18 de April de 2006 y está archivada en: CSS, Codigo. Puedes dejar un comentario, o enviar un trackback desde tu sitio.
