Webmaster Libre

Desarrollo web con software libre

Buscador

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 Martes, 18 de Abril de 2006 y está archivada en: CSS, Codigo. Puedes dejar un comentario, o enviar un trackback desde tu sitio.

5 Comentarios

Agrega el tuyo
  1. No me vendría mal adaptar mi HTML del 98 al XML que se usa ahora… Me marqué algunas guías para eso hace poco, pero no tuve tiempo de leer… Es que el CSS que yo aprendí a usar mínimamente es arcaico y para colmo estoy acostumbrado a llamar a todo class y name… nada de id… En fin, voy a hacer una “to-do list” ;)

    Versvs 19 Abril, 2006

  2. Pues creo que mi proximo articulo te va a ser muy útil, ya verás como en cuanto te animes te encanta. A mi esto de estar creando 3 themes diferentes cambiando sólo 1 archivo de texto me parece lo mejor :)

    senda 20 Abril, 2006

  3. [...] Si centrar elementos horizontalmente con CSS es casi un juego de niños, el centrado vertical entraña una dificultad muy superior. [...]

    Webmaster Libre - Desarrollo Web con Software Libre 3 Julio, 2006

  4. [...] Horizontalmente: W3C: Centrar líneas de texto W3C: Centrar un bloque Intenta - Centrar una caja horizontalmente Andy Budd::Blogography: CSS Crib sheet #3 - Centering a Div BlueRobot: CSS Centering: Negative Margin BlueRobot: CSS Centering: Auto-width Margins mezzoblue: horizontally centered absolute positioning 456 Berea Street: Horizontal centering with CSS css-discuss: Centering Block Element shrink_to_fit and center, (2) Webmaster Libre » Centrado con CSS (1): Horizontal [...]

    Juglar :: Centrar :: August :: 2005 24 Agosto, 2006

  5. Gracias, aunque parezca un juego de niños me ayudó mucho

    Mario 7 Septiembre, 2008

Comentar:

Algunas etiquetas HTML permitidas:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Blogalaxia BlogESfera - Directorio de Blogs Hispanos Web Developement Blogs - BlogCatalog Blog Directory