Vertikal-align-Bild in einem Block fester Höhe

Question

Ich versuche zu UNTEN ein Bild in einem festen Höhe Block ausrichten:

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

... arbeitet in modernen Browsern außer IE! IE saugt kein Wunder, aber ich brauche wirklich eine Verlegenheit, wenn möglich.

Edited hinzufügen:. Keine Tabellen oder Hintergrundbild verwenden kann,

Vielen Dank

Answer 1

Warum können Sie nicht nur position: relative die Teilung, Position: absolute und Chaos mit unten / links Eigenschaften

oder umschalten seiner Position Inline-Block und rumspielen.

Answer 2

So viel wie es schmerzt mich, es zu sagen und auf der Gefahr wird dort von den Puristen gezogen und geviertelt aus, der zuverlässigste Weg, um vertikal etwas in eine universell kompatibelen Art und Weise auszurichten ist eine Tabelle zu verwenden.

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

einfachste Weg, dies zu tun, ist in dem DIV-Stil zu verwenden, =. "Background: url (...) no-repeat Mitte unten" anstelle von IMG-Tag

Answer 4

Ich kann es nicht finden, gerade jetzt, aber ich sah etwas Positionierung das Element bei 50% (oben) und dann einen negativen Spitzen-Marge von 50% zu geben.

Nur für die vertikale Ausrichtung offensichtlich ...