TRUCO: Cómo centrar un elemento HTML con CSS

En mi opinión la combinación HTML+CSS es un verdadero infierno. Es para volverse loco como el de la foto. Y si le añades JavaScript no te quiero ni contar. Y no debería ser así. Hay muchas cosas que debes hacer normalmente y que deberían ser muuuuy fáciles, pero CSS las convierte en algo complicadísimo. Por ejemplo lo que me ocupa hoy: si quiero que un elemento de mi página aparezca centrado dentro de su elemento padre ¿por qué no puedo poner simplemente un atributo “centered:true;” o algo así?. No debería ser tan complicado como es ahora ¿verdad?.

Bien es cierto que no soy un super-experto en CSS y que además lo que de verdad convierte el trabajo Web en un infierno son los navegadores y sus pequeñas sutilezas y diferencias a la hora de cumplir (o no) los estándares. Pero también es verdad que es excesivamente complicado y no debería ser así. Encima todavía hay mucho gañán por ahí que usa Internet Explorer 6 (o peor aún, Windows 98), Firefox del año de la polka, o (me dan escalofríos sólo de pensarlo) alguna versión de Netscape. Y así es cuando es imposible conseguir algo que funcione como es debido. A esos, lo siento mucho, pero que no haré esfuerzo alguno por darles soporte en mis páginas. Total, acabarán tarde o temprano con el ordenador frito por algún virus (muy merecidamente), y se comprarán uno nuevo con Windows 7 o Mac OS X. Como Dios manda 😉

Bueno, a lo que íbamos, que me disperso…

Si tienes que conseguir que un elemento de tu página se centre automáticamente en la misma lo que tienes que hacer es aplicarle un estilo como este:

.centrado{
  margin-left: auto;
  margin-right: auto;
}

Es decir, lo que tenemos que hacer es indicar que queremos un margen automático tanto a la izquierda como a la derecha del elemento. Obvio y sencillo ¿verdad? 😉

¡No me funciona en Internet Explorer!

Esto funcionará bien en Chrome, Firefox o Safari, pero si lo pruebas en Internet Explorer 8 no te hará ni caso por defecto. Más de alguno ya estará pensando: “¡Maldita sea!, estos #$%@ de Microsoft pasando de cumplir con los estándares”.

Bueno en realidad lo que pasa es otra cosa. Si no le indicamos otra cosa, por defecto IE8 mostrará el contenido HTML en modo “quirks”, es decir, en modo de compatibilidad con páginas viejas, por lo que no hará caso a indicaciones estándar que le pongamos. Pero eso no siginifica que no soporte el estándar adecuadamente (al menos en este caso). Simplemente hay que indicarle que debe hacerlo.

Para ello lo que hay que hacer es poner como primera línea del código HTML el tipo de documento, indicando por tanto que debe ceñirse a un estándar concreto (sí, IE es un infierno). Por ejemplo, para XHTML 1.0 sería este:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>

Haciendo esto, ahora IE8 intepreta correctamente las instrucciones y centra el elemento horizontalmente al aplicarle un estilo como el anterior.

¡Eh! Las imágenes siguen sin centrarse

Claro. Es que lo anterior se aplica a aquellos elementos, como los DIV, que se renderizan en modo bloque. Sin embargo las imágenes se renderizan en modo “inline” (en línea con el texto y otros elementos inline), por lo que no hace ni caso a los atributos anteriores de margen automático. Otros elementos inline son los enlaces, span, controles input, etc…

¿Cómo lo solucionamos?

Pues tenemos dos opciones: usar el estilo CSS “text-align:center;” que hace que el texto (y los elementos en línea) se centren o, mejor aún, hacer que la imagen se comporte como un elemento de bloque añadiendo a sus estilos “display:block;“:

.centrado{
  display:block;
  margin-left: auto;
  margin-right: auto;
}

Al hacer esto ya se comportará de la manera esperada.

¿Y cómo centro verticalmente?

Buena pregunta. Me alegro de que la hagas… En CSS2 tampoco hay ninguna forma fácil de hacerlo. Y aún es más rebuscado que el caso anterior.

Básicamente lo que hay que hacer (y lo dice la propia W3C), es hacer que el elemento contenedor del elemento que queremos centrar se comporte como una celda de una tabla. Como las celdas de las tablas síse pueden alinear con el estilo vertical-align, entonces si le damos una determinada altura seremos capaces de que se centren los elementos que contiene:

.centradoV
{
    display: table-cell;
    vertical-align: middle
}

El problema es que esto destruye el centrado horizontal del elemento padre, y si queremos centrar ambos tenemos que nidar otros elementos.

En resumen

Lo dicho: una pesadilla. Parece mentira.

La versión 3 de CSS, que lleva en desarrollo desde 2005, parece que algo van a hacer para mejorarlo. No me he leído a fondo el draft actual de la parte de posicionamiento de elementos (que es de abril de este año), pero eso de definir “slots” y colocar cosas en ellos posicionándolos con letras no me llama ni un poco. A este paso va a ser más dificil aprender HTML+CSS que sacarse la carrera de aeronáuticos 🙁

Por cierto, me ha llamado la atención ver que en el Draft de esta parte está trabajando un español de la Univerdad de Oviedo…

En fin, espero que lo que cuento en este post te resulte de ayuda y te saque de algún apuro.

Sin categoría

6 thoughts on “TRUCO: Cómo centrar un elemento HTML con CSS

  1. Interesante y muy real (lo hemos sufrido todos los Webmasters…))

    Lo de César Acebal (la persona de la Univ. de Oviedo que citas) es debido a que la oficina del W3C en España está allí (hay ya 15 oficinas por todo el mundo) y al interés que esa universidad siempre ha mostrado por las tecnologías emergentes -J.M. Cueva fue uno de los primeros promotores de .NET en el mundo académico-. Sería bueno que la iniciativa cuajase y viéramos más nombres españoles vinculados con iniciativas como esta.

    Un abrazo
    Marino

  2. Tres comentarios:

    1-El de la foto me recuerda a álguien que ambos conocemos, lo has hecho a posta? 😛
    2-A ver si terminan ya el desarrollo de CSS3… que a este paso ya no nos valdrá la penaaaa vamooooos
    3-Muy interesante el artículo: centrar parece una “chorrada” pero estamos de acuerdo: da serios dolores de cabeza.

  3. @marino: ¡Cuánto tiempo! Gracias por el comentario. No sabía lo que mecionas, y eso explica muchas cosas. Pues me alegra ver que hay gente de aquí involucrada. A ver si desde España podemos influir un poco en cosas importantes como esta. Un abrazo!

    @Jesús: No he puesto la foto pensando en nadie, ¿a quién te recuerda a ti?.
    Gracias por el comentario.
    Un saludo!

    JM

  4. Cómo me he visto identificado…. Cuántas veces he dicho:
    – No puede ser tan difícil centrar un div verticalmente !!!! Algo estaré haciendo mal

    Es que es verdaderamente vergonzoso lo que hay que hacer para centrar un div. Y luego está lo de centrar horizontalmente al padre y verticalmente al hijo; empiezas a anidar divs… y al final que me expliquen las ventajas de usar CSS. En el HTML acabamos teniendo más código dedicado a la presentación que al contenido, JA!

  5. Hola,

    Para centrar un elemento tambien necesitas ponerle un ancho,

    #kernel {width:800px;min-height:400px;margin:0px auto;margin-bottom:20px;}

    Otra alternativa que estoy encontrado cada vez más en los sitios es utilizar jQuery, con sus eventos y calculando la posicion absoluta de los elementos cualquier distribución
    puede reproducirse y no es muy engorroso.

    es cierto que la diversidad en la implementación de cada uno de los navegadores puede ser una lata,
    pero ha terminado convirtiendose en toda una profesion dentro del desarrollo web, maquetadores de css no?

Deja un comentario

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