Was ist Vertical Align?

CSS hat eine Eigenschaft namens vertical align. Sie kann am Anfang etwas verwirrend sein, daher dachte ich, wir könnten erklären, wofür sie da ist und einige Anwendungsfälle aufzeigen.

Der grundlegende Gebrauch sieht so aus

img { 
  vertical-align: middle;
}

Beachten Sie, dass in diesem Anwendungsfall `vertical-align` auf das `img`-Element angewendet wird. Bilder sind von Natur aus Inline-Elemente, was bedeutet, dass sie sich direkt in einer Zeile mit Text befinden, wenn sie können. Aber was bedeutet „in einer Zeile sitzen“ genau? Hier kommt `vertical-align` ins Spiel.

Die gültigen Werte sind: **baseline, sub, super, top, text-top, middle, bottom, text-bottom, length** oder ein **Wert in Prozent**.

Die Verwirrung entsteht meiner Meinung nach, wenn Leute versuchen, `vertical-align` auf Block-Level-Elemente anzuwenden und keine Ergebnisse erhalten. Wenn Sie ein kleines div in einem größeren div haben und das kleinere darin vertikal zentrieren möchten, hilft Ihnen `vertical-align` nicht.

Baseline

Der Standardwert von `vertical-align` (wenn Sie nichts deklarieren) ist **baseline**. Bilder werden auf der Grundlinie des Textes ausgerichtet. Beachten Sie, dass Unterlängen bei Buchstaben unter die Grundlinie abfallen. Bilder werden nicht mit dem tiefsten Punkt der Unterlängen ausgerichtet, das ist nicht die Grundlinie.

Middle

Der vielleicht häufigste Verwendungszweck von `vertical-align` ist die Einstellung auf „middle“ bei bildgroßen Bildern. Die Ergebnisse sind im Allgemeinen browserübergreifend konsistent.

Der Browser versucht sein Bestes, die Pixelhöhe des Textes mit der Pixelhöhe des Bildes zu zentrieren.

Beachten Sie, dass das Bild, wenn es größer als die aktuelle Schriftgröße und Zeilenhöhe ist, die folgenden Zeilen bei Bedarf nach unten verschiebt.

Text-bottom

Anders als die Grundlinie des Schriftsatzes ist der untere Rand des Textes, bis zu dem die Unterlängen reichen. Bilder können auch mit dieser Tiefe ausgerichtet werden.

Text-top

Das Gegenteil von `text-bottom` ist `text-top`, der höchste Punkt der aktuellen Schriftgröße. Sie können sich auch daran ausrichten. Beachten Sie, dass die aktuelle Schriftart, Georgia, wahrscheinlich einige Oberlängen hat, die höher sind als die hier dargestellten, daher der kleine Abstand.

Top & Bottom

`Top` und `Bottom` funktionieren ähnlich wie `text-top` und `text-bottom`, sind aber nicht durch Text eingeschränkt, sondern durch alles andere in dieser Zeile (wie ein anderes Bild). Wenn es also zwei Bilder in derselben Zeile gäbe, mit unterschiedlichen Höhen und beide größer als der Text in dieser Zeile, würden ihre Oberseiten (oder Unterseiten) unabhängig von der Textgröße ausgerichtet.

Sub & Super

Diese Werte stehen für hochgestellt und tiefgestellt, sodass Elemente, die mit diesen Methoden ausgerichtet werden, sich entsprechend positionieren.

Vertical Align bei Tabellenzellen

Im Gegensatz zu Bildern werden Tabellenzellen standardmäßig auf `middle` vertikal ausgerichtet.

Wenn Sie möchten, dass der Text am oberen oder unteren Rand der Zelle ausgerichtet wird, wenn er die benötigte Höhe überschreitet, wenden Sie die vertikale Ausrichtung `top` oder `bottom` an.

Wenn Sie `vertical-align` auf Tabellenzellen anwenden, ist es am besten, bei `top`, `bottom` und `middle` zu bleiben. Keiner der anderen Werte ist ohnehin sehr sinnvoll und führt zu unvorhersehbaren browserübergreifenden Ergebnissen. Zum Beispiel richtet `text-bottom` den Text in IE 6 am unteren Rand und in Safari 4 am oberen Rand aus. `sub` bewirkt eine mittlere Ausrichtung in IE 6 und eine obere Ausrichtung in Safari 4.

vertical-align und inline-block

Bilder verhalten sich zwar technisch gesehen wie Inline-Elemente, aber eher wie Inline-Block-Elemente. Sie können ihre Breite und Höhe festlegen und diese werden beachtet, anders als bei den meisten Inline-Elementen.

Inline-Block-Elemente verhalten sich bei `vertical-align` genauso wie Bilder. Beziehen Sie sich daher auf den obigen Abschnitt. Beachten Sie jedoch, dass nicht alle Browser Inline-Block-Elemente gleich behandeln, sodass `vertical-align` möglicherweise das geringste Ihrer Probleme ist. Das ist aber eine andere Geschichte....

Als Attribut veraltet

Gelegentlich sehen Sie „valign“, das für Tabellenzellen zur vertikalen Ausrichtung verwendet wird, z. B. `<td valign=top>`. Es ist zu beachten, dass dieses Attribut veraltet ist und nicht verwendet werden sollte. Es gibt eigentlich keinen Grund dafür, da Sie es ohnehin mit CSS tun können.

Weitere Informationen

• vertical-align im Almanach
• vertical-align auf MDN
• Christopher Aue: Alles, was Sie über Vertical-Align wissen müssen
• Trick damit zum Zentrieren von Dingen in übergeordneten Elementen mit unbekannter Höhe