Imagen vertical-align en un bloque de altura fija

Question

Estoy intentando INFERIOR alinear una imagen en un bloque de altura fija:

div { float: left; width: 100px; height: 100px; line-height: 100px; }
div img { vertical-align: middle; }

... funciona en los navegadores modernos, excepto IE! IE chupa ninguna maravilla, pero realmente necesita una solución, si es posible.

Editado para añadir:. No se puede utilizar una imagen de fondo tablas o

Muchas gracias

Answer 1

¿Por qué no acaba de position: relative la división, la posición: absoluta y meterse con propiedades inferiores / izquierda

O alternar su posición de inline-block y jugar.

Answer 2

Por mucho que me duela decirlo y corriendo el riesgo de ser descuartizado por los puristas por ahí, la forma más confiable para alinear verticalmente algo de una manera compatible universalmente es el uso de una mesa.

table {
    float: left; 
    width: 100px; 
    height: 100px; 
    line-height: 100px;
}

<table cellspacing="0" cellpadding="0">
    <tr>
        <td align="center" valign="bottom"><img src="foo.jpg" /></td>
    </tr>
</table>

Answer 3

La manera más sencilla de hacer esto es utilizar en el estilo DIV =. "Background: url (...) no-repeat parte inferior central" en lugar de la etiqueta IMG

Answer 4

No encuentro ahora mismo, pero vi algo posicionamiento del elemento en el 50% (la parte superior) y luego dándole un margen superior negativo de -50%.

Sólo por la alineación vertical, obviamente, ...