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;">
<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
