Alineación vertical para todos lo navegadores

karmel — Thu, 19 Apr 2007 17:11:48 +0200

Nota mental:

Cuando quieras alinear un elemento verticalmente, como por ejemplo una imagen, en una capa de css y no quieras usar tablas porque no consideras el momento ni el lugar tenemos:

#micapita {

width: 200px;

height: 200px;

display:table-cell;

vertical-align:middle;

}

Cuando quieras hacer esto mismo sin que resurjan tus instintos asesinos hacia los creadores de Internet Explorer 6 ó 7 puedes hacer lo mismo pero diferente:

#micapita {

width: 200px;

height: 200px;

display:block;

font-size:200px;

}

O sea, utilizar el mismo tamaño de letra que el de la capa contenedora. Aunque Torres Burriel nos referencia a otro truquillo que al menos yo no he conseguido que funcionara pero que sigue la misma lógica: usar el mismo line-height.

maquetación

Alineación vertical para todos lo navegadores