vertical-align

Die vertical-align-Eigenschaft in CSS steuert, wie nebeneinander auf einer Zeile stehende Elemente ausgerichtet werden.

img {
  vertical-align: middle;
}

Damit dies funktioniert, müssen die Elemente an einer Grundlinie ausgerichtet werden. Das heißt, inline-Elemente (z. B. <span>, <img>) oder inline-block-Elemente (z. B. wie durch die display-Eigenschaft gesetzt).

Die gültigen Werte sind

• baseline – Dies ist der Standardwert.
• top – Richtet die Oberseite des Elements und seiner Nachkommen an der Oberseite der gesamten Zeile aus.
• bottom – Richtet die Unterseite des Elements und seiner Nachkommen an der Unterseite der gesamten Zeile aus.
• middle – Richtet die Mitte des Elements an der Mitte von Kleinbuchstaben im Elternteil aus.
• text-top – Richtet die Oberseite des Elements an der Oberseite der Schriftart des Elternelements aus
• text-bottom – Richtet die Unterseite des Elements an der Unterseite der Schriftart des Elternelements aus.
• sub – Richtet die Grundlinie des Elements an der tiefgestellten Grundlinie seines Elternteils aus. So wie ein <sub> sitzen würde.
• super – Richtet die Grundlinie des Elements an der hochgestellten Grundlinie seines Elternteils aus. So wie ein <sup> sitzen würde.
• length – Richtet die Grundlinie des Elements um die angegebene Länge über der Grundlinie seines Elternteils aus. (z. B. px, %, em, rem usw.)

Sie können Beispiele für jeden hier sehen

Check out this Pen!

Ein häufiger Anwendungsfall ist die Ausrichtung eines Avatars mit einem Benutzernamen. Um sie auf einer Zeile zu zentrieren, würden Sie vertical-align: middle; verwenden. Beachten Sie jedoch, dass der Text entsprechend seines höchsten Oberlängenbuchstabens und tiefsten Unterlängenbuchstabens zentriert wird.

Jedes Element richtet sich nach der von Ihnen gesetzten Zeile aus, die sich von Element zu Element nicht ändert. Sie können also mischen und anpassen, welche Elemente welchen Wert haben – die Elemente beeinflussen sich nicht gegenseitig.

Beachten Sie, dass vertical-align auch für Tabellenzellen nützlich ist, um deren Inhalt auszurichten. Die besten Ergebnisse erzielen Sie jedoch mit top, middle und bottom, da die anderen Werte inkonsistente browserübergreifende Ergebnisse liefern.

Weitere Informationen

• Was ist vertical-align?
• Diese Eigenschaft erlaubt es Ihnen nicht, ein Element "vertikal" innerhalb eines anderen Elements zu zentrieren. Flexbox ist dafür das besser geeignete Werkzeug. Es gibt jedoch einen Trick mit einem simulierten "Geister"-Element, der dies ermöglichen kann.
• MDN

Browser-Unterstützung

Chrome	Safari	Firefox	Opera	IE	Android	iOS
Alle	Alle	Alle	4+	4+	Alle	Alle

Beachten Sie, dass einige ersetzte Elemente (z. B. <textarea>) inline sind, aber ihre Grundlinie ist nicht spezifiziert, sodass das Verhalten von Browser zu Browser variieren kann.