JASoft.org

El blog de José Manuel Alarcón Aguín. Programación web y mucho más...

MENÚ - JASoft: JM Alarcón

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.

José Manuel Alarcón
Banner

Comentarios (2) -

Gracias!! esto lo he sufrido..gracias por el post. Resulta de gran ayuda, como todos los de este magnífico blog.

Responder

¡Qué grande eres!.
¡Muchas gracias!

Responder

Agregar comentario