vertical-align

Zuletzt aktualisiert am 15. Februar 2026

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.

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

Beispiele

Icon neben Text ausrichten

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 vertikal zentriert neben Text */
.icon {
  vertical-align: middle;
}

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

<div class="icon-demo">
<div class="i-baseline"><div class="label">vertical-align: baseline (Standard)</div><span class="icon"></span> Text neben Icon</div>
<div class="i-middle"><div class="label">vertical-align: middle</div><span class="icon"></span> Text neben Icon</div>
<div class="i-text-bottom"><div class="label">vertical-align: text-bottom</div><span class="icon"></span> Text neben Icon</div>
</div>

Alle Werte im Vergleich

Die verschiedenen Werte von vertical-align im direkten Vergleich. Das orangefarbene Quadrat zeigt die Position des Inline-Elements.

.baseline    { vertical-align: baseline; }
.top         { vertical-align: top; }
.middle      { vertical-align: middle; }
.bottom      { vertical-align: bottom; }
.text-top    { vertical-align: text-top; }
.text-bottom { vertical-align: text-bottom; }
.sub         { vertical-align: sub; }
.super       { vertical-align: super; }

<div class="va-all">
<div class="va-baseline"><span class="name">baseline</span><span class="box"></span> Beispieltext</div>
<div class="va-top"><span class="name">top</span><span class="box"></span> Beispieltext</div>
<div class="va-middle"><span class="name">middle</span><span class="box"></span> Beispieltext</div>
<div class="va-bottom"><span class="name">bottom</span><span class="box"></span> Beispieltext</div>
<div class="va-text-top"><span class="name">text-top</span><span class="box"></span> Beispieltext</div>
<div class="va-text-bottom"><span class="name">text-bottom</span><span class="box"></span> Beispieltext</div>
<div class="va-sub"><span class="name">sub</span><span class="box"></span> Beispieltext</div>
<div class="va-super"><span class="name">super</span><span class="box"></span> Beispieltext</div>
</div>

Vertikale Ausrichtung in Tabellenzellen

In Tabellenzellen bestimmt vertical-align, wo der Inhalt innerhalb der Zelle positioniert wird. Das ist besonders nützlich bei Zellen mit unterschiedlicher Inhaltshöhe.

td { vertical-align: top; }    /* Inhalt oben */
td { vertical-align: middle; } /* Inhalt zentriert */
td { vertical-align: bottom; } /* Inhalt unten */

<div class="table-demo">
<table>
  <tr>
    <td class="td-top"><div class="label">top</div>Oben</td>
    <td class="td-middle"><div class="label">middle</div>Mitte</td>
    <td class="td-bottom"><div class="label">bottom</div>Unten</td>
  </tr>
</table>
</div>

Bilder und das baseline-Problem

Bilder (<img>) sind standardmäßig Inline-Elemente und sitzen auf der Baseline. Das erzeugt einen kleinen Spalt unter dem Bild, weil Platz für Unterlängen (g, p, y) reserviert wird. vertical-align: bottom oder display: block beseitigt diesen Spalt.

/* Problem: Spalt unter dem Bild */
img { vertical-align: baseline; } /* Standard */

/* Lösung 1: vertical-align ändern */
img { vertical-align: bottom; }

/* Lösung 2: Bild zum Block machen */
img { display: block; }

<div class="img-demo">
<div>
  <div class="label">baseline (Spalt sichtbar)</div>
  <div class="img-wrapper-gap"><span class="placeholder"></span> g</div>
</div>
<div>
  <div class="label">vertical-align: bottom (kein Spalt)</div>
  <div class="img-wrapper-gap"><span class="placeholder-fix"></span> g</div>
</div>
</div>

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

• 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.
• 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.
• 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.
• 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.
• vertical-align auf Flex-Items setzen: In einem Flex-Container hat vertical-align keinen Effekt. Verwende stattdessen align-items oder align-self.
• 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

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.

Email-Kompatibilität

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

Verwandte Eigenschaften