mitmario.dev

vertical-align

vertical-align steuert die vertikale Ausrichtung von Inline-Elementen und Inline-Block-Elementen relativ zu ihrer Zeile. Die Eigenschaft wirkt auf <span>, <img>, <input> und andere Inline-Elemente sowie auf Tabellenzellen. Der Standardwert baseline richtet Elemente an der Grundlinie des Textes aus. Für die vertikale Zentrierung von Block-Elementen ist vertical-align nicht geeignet, dafür verwendest du Flexbox oder Grid.

Steckbrief vertical-align
Syntax
vertical-align: baseline | sub | super | text-top | text-bottom | middle | top | bottom | <length> | <percentage>
Initialwert
baseline
Vererbt
Nein
Animierbar
Ja
Kategorie
Typografie
Werte
11
Beispiele
4
Browser
5 von 5
E-Mail
5 von 5
Stand
15.02.2026

Grundlagen

vertical-align richtet ein Inline-Element relativ zur Zeilenbox aus, in der es sich befindet. Die Zeilenbox wird durch das höchste und tiefste Element in der Zeile definiert. baseline (Standard) richtet die Grundlinie des Elements an der Grundlinie des Elternelements aus. middle zentriert das Element vertikal relativ zur Mitte der Zeile.

Die Eigenschaft funktioniert nur auf Inline-Elementen (display: inline, display: inline-block) und Tabellenzellen (display: table-cell). Auf Block-Elementen wie <div> oder <p> hat vertical-align keinen Effekt. Das ist einer der häufigsten Irrtümer bei CSS-Anfängern: vertical-align: middle auf einem Block-Element zentriert nichts.

Bei Tabellenzellen verhält sich vertical-align anders als bei Inline-Elementen. In Tabellenzellen bestimmt es, wie der gesamte Inhalt der Zelle vertikal innerhalb der Zelle positioniert wird. top drückt den Inhalt nach oben, bottom nach unten und middle zentriert ihn. Das macht vertical-align zum einzigen nativen Weg, Inhalte in Tabellenzellen vertikal zu zentrieren.

Syntax & Werte

11 Werte
Wert Beschreibung Beispiel
baseline Grundlinie des Elements an der Grundlinie des Elternelements ausrichten (Standard). vertical-align: baseline
top Oberkante des Elements an der Oberkante der Zeilenbox ausrichten. vertical-align: top
bottom Unterkante des Elements an der Unterkante der Zeilenbox ausrichten. vertical-align: bottom
middle Mitte des Elements an der Mitte der Zeile ausrichten (Grundlinie + halbe x-Höhe). vertical-align: middle
text-top Oberkante an der Oberkante der Schrift des Elternelements. vertical-align: text-top
text-bottom Unterkante an der Unterkante der Schrift des Elternelements. vertical-align: text-bottom
sub Tiefgestellte Position (wie <sub>). vertical-align: sub
super Hochgestellte Position (wie <sup>). vertical-align: super
<length> Verschiebt das Element um den angegebenen Wert nach oben (positiv) oder unten (negativ). vertical-align: 4px
<percentage> Verschiebt relativ zur line-height des Elements. vertical-align: 50%
inherit Erbt den Wert explizit vom Elternelement. vertical-align: inherit

Beispiele

4 Beispiele

Ein häufiges Problem: Ein kleines Icon (Bild oder SVG) neben Text steht nicht auf der richtigen Höhe. vertical-align: middle richtet das Icon an der Textmitte aus.

Icon neben Text ausrichten
/* Icon vertikal zentriert neben Text */
.icon {
  vertical-align: middle;
}

/* Alternative: text-bottom für Bündigkeit */
.icon {
  vertical-align: text-bottom;
}

Barrierefreiheit

Verwende <sub> und <sup> statt vertical-align: sub und vertical-align: super für semantisch hoch- oder tiefgestellten Text. Screenreader erkennen die HTML-Elemente und können den Nutzer darauf hinweisen. Reines CSS-Styling wird von Screenreadern ignoriert. Für mathematische Formeln oder chemische Formeln sind die HTML-Elemente die richtige Wahl.

Achte darauf, dass vertikal verschobene Elemente genug Kontrast und Größe haben. Text mit vertical-align: super in kleiner Schriftgröße kann schwer lesbar sein, besonders wenn er auch noch verkleinert wird (wie der Browser es bei <sup> standardmäßig tut).

Für die vertikale Zentrierung von Layout-Elementen verwende Flexbox (align-items: center) statt display: table-cell mit vertical-align: middle. Flexbox ist semantisch korrekter, weil table-cell eine Tabellensemantik impliziert, die Screenreader verwirren kann.

Häufige Fehler

6 Fehler
01 vertical-align auf Block-Elemente anwenden
vertical-align: middle auf einem <div> hat keinen Effekt. Die Eigenschaft wirkt nur auf Inline-Elemente, Inline-Blocks und Tabellenzellen. Verwende display: flex; align-items: center für Block-Elemente.
02 vertical-align zur vertikalen Zentrierung von Layouts verwenden
vertical-align zentriert keine Container. Es richtet nur Elemente innerhalb einer Textzeile aus. Für Layout-Zentrierung verwende Flexbox oder Grid.
03 Den Bild-Spalt ignorieren
Bilder auf baseline erzeugen einen kleinen Spalt unterhalb. Setze vertical-align: bottom oder display: block auf <img>, um den Spalt zu entfernen.
04 middle ist nicht exakt mittig
middle richtet die Mitte des Elements an der Grundlinie plus halbe x-Höhe aus. Das ist nicht exakt die Mitte der Zeile, sondern leicht nach unten verschoben. Für exakte Zentrierung verwende Flexbox.
05 vertical-align auf Flex-Items setzen
In einem Flex-Container hat vertical-align keinen Effekt. Verwende stattdessen align-items oder align-self.
06 super und sub für Layout-Zwecke missbrauchen
vertical-align: super und sub sind für typografische Hoch- und Tiefstellung gedacht, nicht für beliebige vertikale Verschiebungen. Verwende <length> oder <percentage> für präzise Positionierung.

Browser-Kompatibilität

5 von 5

vertical-align wird von allen Browsern vollständig unterstützt. Die Eigenschaft gehört zu den ältesten CSS-Eigenschaften und funktioniert in allen Browsern identisch.

  • Chrome

    Komplett

  • Firefox

    Komplett

  • Safari

    Komplett

  • Edge

    Komplett

  • Opera

    Komplett

Email-Kompatibilität

5 von 5

vertical-align funktioniert in HTML-Emails gut, besonders in Tabellen-Layouts. Es ist eine der zuverlässigsten CSS-Eigenschaften für Email-Entwicklung.

  • Apple Mail

    Komplett

  • Gmail

    Komplett

  • Outlook

    Komplett

    Funktioniert zuverlässig in Tabellenzellen. Auf Inline-Elementen eingeschränkt

  • Thunderbird

    Komplett

  • Yahoo Mail

    Komplett

Newsletter

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da

Danach kommt eine Mail mit Bestätigungslink, erst dann bist du eingetragen. Abmelden geht unten in jeder Ausgabe. Mehr dazu in der Datenschutzerklärung.