Vertikale CSS-Ausrichtung

Um Text innerhalb eines Elternelements vertikal auszurichten und zu beachten, dass ein img ein Inline-Element ist und sich so ähnlich verhält, können Sie einfach line-height auf setzen Die height des übergeordneten Elements:

JS Fiddle-Demo .

Der CSS-Stil vertical-align gibt die Ausrichtung von Text innerhalb seiner Textzeile an. So können Sie beispielsweise Text als hochgestellten oder tiefgestellten Text angeben.

Es ist also eigentlich nicht beabsichtigt, ein Element innerhalb einer Box vertikal auszurichten.

Es gibt jedoch eine explizite Ausnahme: Tabellenzellen (dh <td> und <th> Elemente) verwenden den vertical-align Stil, um genau das zu tun: richten Sie den Inhalt der Zelle innerhalb der Zelle aus.

Diese Ausnahme ist etwas eigenartig - es sollte wirklich nicht existieren. Die CSS-Designer haben es eingeführt, damit CSS das valign -Attribut von Tabellenelementen reproduzieren kann, das häufig von Designern in den alten Zeiten von Tabellen-basierten Layouts verwendet wurde.

Bei anderen Elementen kann der Inhalt einer Box vertikal in der Mitte ausgerichtet werden, was ein bisschen Kunst sein kann. Es gibt verschiedene Techniken:

1. Bei einzelnen Textzeilen setzen Sie einfach line-height auf die gleiche Höhe wie das gesamte Feld. Sie werden wahrscheinlich nicht einmal vertical-align dafür benötigen.

2. Verwenden Sie display:table-cell; , damit das Element eine Tabellenzelle simuliert, und verwenden Sie dann vertical-align . Dies funktioniert, kann jedoch unbeabsichtigte Konsequenzen haben (es gibt andere Attribute von Tabellenzellen, die Sie möglicherweise nicht simulieren möchten).

3. Wenn Sie die Höhe des Elements kennen, das Sie vertikal ausrichten möchten, können Sie es wie folgt auf 50% minus die Hälfte seiner Höhe positionieren:

   %Vor%

Es gibt ein paar andere, aber diese sollten Ihnen den Einstieg erleichtern.

Ich hoffe, das hilft.

Für eine modernere (IE8 +) Lösung, die keine Tabellen verwendet, mag ich diese > am besten.

vertical-align -Eigenschaft ist nur für td -Elemente wirklich gut. Versuchen Sie etwas wie:

ODER weil Sie die Höhe und Breite von img kennen:

Hübscher cooler und moderner Ansatz (mit angegebener Höhe) :

Ich verwende die Eigenschaft display: box:

Siehe die js-Geige hier: verical align js-fiddle

Javascript wäre wahrscheinlich das beste Mittel, um das Bild für jeden Fall in der vertikalen Mitte zu zentrieren. Wenn Sie eine Bibliothek wie jQuery verwenden können, sind es nur ein paar Zeilen Code.

});

Verwenden Sie die Eigenschaft translate, es ist einfach und funktioniert sogar im IE: