jueves, 30 de abril de 2009

Centrar verticalmente una imagen en un div

Aparentemente una cosa tan trivial como esa tiene un poco más de miga de lo que parece, y buscando soluciones se encuentran muchas divagaciones y ejemplos interminables.

La primera idea es usar el atributo vertical-align, pero sólo es válido para alinear la imagen con el texto adjacente. Sin embargo, se puede usar una solución simple basada ese atributo.

Si definimos el line-height del div igual a su altura y le ponemos un espacio en blanco delante de la imagen para que tenga una referencia donde alinearse, ya lo tenemos:

<div style="border: 1px solid #AA0000; text-align: center; line-height: 100px; width: 100px; height: 100px;">
&nbsp;<img style="vertical-align: middle;" src="http://www.blogger.com/logo.gif" />
</div>




Actualizacion 04/05/2009: Fer propone en los comentarios posibles alternativas a mi solución. Gracias!


Actualización 12/06/2009: He probado en Browsershots esta solución y los resultados son que funciona en

- Navegadores basados en Gecko (todas las versiones probadas de Firefox, Seamonkey, ...)
- Navegadores baseados en KHTML/Webkit (todas las versiones probadas de Konqueror, Safari, Chrome, ...)
- Todas las versiones de Opera a partir de la 7.54 incluida la 10 beta
- Internet Explorer 8.0

Y no funciona en:
- Versiones de IE inferiores a la 8.0 (7.0, 6.0, 5.5)
- Avant
- Dillo


Actualización 7/10/2009: En CodeProject dan una solución basada en javascript

Actualización 4/5/2011: 2 años después sigue dando guerra el mismo problema y en los comentarios apuntan un enlace que resuelve un caso particular. Gracias

http://www.jakpsatweb.cz/css/css-vertical-center-solution.html