CSS vertical-align Eigenschaft

Die Eigenschaft vertical-align legt die vertikale Ausrichtung eines Inline-, Inline-Block- oder Tabellenzellen-Feldes fest. Zu Inline-Level-Elementen gehören Bilder, Text, Schaltflächen und alle Elemente mit display: inline oder display: inline-block.

Diese Seite erklärt, wo vertical-align tatsächlich wirkt, das Zeilenfeld-Modell, das die Werte verständlich macht, jeden Schlüsselwortwert und seine Funktion sowie die häufigsten Fallstricke.

Wo vertical-align wirkt

Die Eigenschaft hat nur in zwei Situationen eine Wirkung:

Innerhalb eines Zeilenfeldes — zur Ausrichtung eines Inline- oder Inline-Block-Feldes relativ zur Textzeile, auf der es sich befindet. Zum Beispiel die Ausrichtung eines <img>-Symbols am umgebenden Text.
Innerhalb von Tabellenzellen — zur Ausrichtung des Inhalts eines <td>, <th> oder eines Elements mit display: table-cell.

Außerhalb dieser Kontexte wird sie stillschweigend ignoriert.

Was sie NICHT tut

Dies ist die häufigste Quelle der Verwirrung: vertical-align zentriert keine Block-Level-Elemente. Das Setzen von vertical-align: middle auf einem <div> hat keine Wirkung. Um einen normalen Block zu zentrieren, verwende Flexbox (align-items: center), Grid oder margin: 0 auto (nur horizontal). Das Schlüsselwort middle zentriert trotz seines Namens nur ein Inline-Feld gegenüber dem umgebenden Text — nicht einen Block innerhalb seines Elternelements.

Anfangswert	baseline
Gilt für	Inline-Level- und Tabellenzellen-Elemente, gilt auch für ::first-letter und ::first-line.
Vererbt	Nein.
Animierbar	Nein.
Version	CSS1
DOM-Syntax	object.style.verticalAlign = "middle";

Wie vertical-align funktioniert

Um die Eigenschaft gut einzusetzen, benötigt man ein einfaches mentales Modell.

Jede Textzeile wird innerhalb eines unsichtbaren Zeilenfeldes (line box) angeordnet. Innerhalb dieses Zeilenfeldes gibt es zwei Referenzlinien, die wichtig sind:

Die Grundlinie (baseline) — die Linie, auf der die Unterkanten der meisten Buchstaben sitzen (Buchstaben wie „g" und „y" reichen darunter hinaus).
Der Inhaltsbereich (content area) — das vollständige Em-Feld der Schrift, grob vom oberen Ende des höchsten Zeichens bis zum unteren Ende des tiefsten Unterlängenzeichens.

Die meisten vertical-align-Schlüsselwörter verschieben ein Feld relativ zu einer dieser Linien (baseline, text-top, text-bottom, middle), während top und bottom stattdessen an den Rändern des gesamten Zeilenfeldes ausrichten.

In einer Tabellenzelle sind die Regeln einfacher: vertical-align bestimmt, wo der Inhalt der Zelle innerhalb der Zellhöhe sitzt, und nur top, middle, bottom und baseline sind sinnvoll.

Syntax

Syntax der CSS vertical-align Eigenschaft

vertical-align: baseline | length | sub | super | top | text-top | middle | bottom | text-bottom | initial | inherit;

Beispiel der vertical-align Eigenschaft mit dem Wert "sub":

Beispiel der CSS vertical-align Eigenschaft mit dem Wert sub

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      span {
        vertical-align: sub;
      }
    </style>
  </head>
  <body>
    <h2>Vertical-align property example</h2>
    <p>This is some paragraph with
      <span>vertical-align</span> property.
    </p>
  </body>
</html>

Probier es selbst »

Ergebnis

Beispiel der vertical-align Eigenschaft mit dem Wert "middle":

Beispiel der CSS vertical-align Eigenschaft mit dem Wert middle

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      span {
        vertical-align: middle;
      }
    </style>
  </head>
  <body>
    <h2>Vertical-align property example</h2>
    <p>This is some paragraph with
      <span>vertical-align</span> property.
    </p>
  </body>
</html>

Probier es selbst »

Beispiel der vertical-align Eigenschaft mit dem Wert "super":

Beispiel der CSS vertical-align Eigenschaft mit dem Wert super

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      span {
        vertical-align: super;
      }
    </style>
  </head>
  <body>
    <h2>Vertical-align property example</h2>
    <p>This is some paragraph with
      <span>vertical-align</span> property.
    </p>
  </body>
</html>

Probier es selbst »

Beispiel der vertical-align Eigenschaft mit den Werten "top" und "bottom":

Beispiel der CSS vertical-align Eigenschaft mit den Werten top und bottom

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        width: 100%;
        border-collapse: collapse;
      }
      table,
      th,
      td {
        border: 1px solid #cccccc;
      }
      td {
        height: 100px;
      }
      .top {
        vertical-align: top;
      }
      .bottom {
        vertical-align: bottom;
      }
    </style>
  </head>
  <body>
    <h2>Vertical-align property example</h2>
    <table>
      <tr>
        <th>Bottom</th>
        <th>Middle</th>
        <th>Top</th>
      </tr>
      <tr>
        <td class="bottom">Some text</td>
        <td>Some text</td>
        <td class="top">Some text</td>
      </tr>
    </table>
  </body>
</html>

Probier es selbst »

Beispiel mit einem Längenwert (Symbol am Text ausrichten)

Ein Längenwert verschiebt das Feld von der Grundlinie nach oben (positiver Wert) oder nach unten (negativer Wert). Dies ist der sauberste Weg, ein Inline-Bild oder Symbol am danebenstehenden Text auszurichten:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .label {
        font-size: 20px;
      }
      .icon {
        width: 18px;
        height: 18px;
        vertical-align: -3px; /* drop it 3px to sit on the text */
      }
    </style>
  </head>
  <body>
    <p class="label">
      <img class="icon" src="https://api.w3docs.com/uploads/media/default/0001/03/4624f58ca574eae0a734eb0d43fd87bc2326a306.png" alt="icon">
      Aligned with the text baseline
    </p>
  </body>
</html>

Häufige Fallstricke

Der „mysteriöse Abstand" unter einem Bild. Ein einzelnes <img>-Element innerhalb eines Blocks hat oft einige Pixel Abstand darunter. Das liegt daran, dass das Bild als Inline-Element auf der Text-Grundlinie sitzt und Platz für Unterlängen lässt. Beheben lässt sich das mit vertical-align: bottom (oder middle/top) oder indem man dem Bild display: block gibt.
middle ist keine echte Zentrierung. vertical-align: middle richtet das Feld an der Grundlinie plus der halben x-Höhe des Elternelements aus — visuell nah an der Mitte für kleine Symbole, aber nicht exakt, und bei Block-Elementen hat es keinerlei Wirkung.
Es wird nicht vererbt. Jedes Feld muss sein eigenes vertical-align deklarieren; das Setzen auf einem Elternelement hat keine Wirkung auf Kindelemente.
top/bottom hängen vom höchsten Inhalt ab. Sie richten sich am Zeilenfeld aus, sodass ein einzelnes hohes Element in der Zeile die Position aller anderen beeinflussen kann.
Negative length-Werte sind erlaubt und sind oft vorhersehbarer als Schlüsselwörter für pixelgenaue Symbol-Ausrichtung.

Werte

Wert	Beschreibungen	Ausprobieren
baseline	Richtet die Grundlinie des Elements an der Grundlinie seines Elternelements aus. Dies ist der Standardwert.	Ausprobieren »
length	Verschiebt die Grundlinie des Feldes nach oben (positiver Wert) oder nach unten (negativer Wert) relativ zur Grundlinie des Elternelements.	Ausprobieren »
sub	Senkt die Grundlinie des Feldes auf die richtige Position für tiefgestellte Zeichen des Elternfeldes.	Ausprobieren »
super	Hebt die Grundlinie des Feldes auf die richtige Position für hochgestellte Zeichen des Elternfeldes.	Ausprobieren »
top	Richtet die Oberkante des ausgerichteten Teilbaums an der Oberkante des Zeilenfeldes aus.	Ausprobieren »
text-top	Richtet die Oberkante des Feldes an der Oberkante des Inhaltsbereichs des Elternelements aus.	Ausprobieren »
middle	Richtet den vertikalen Mittelpunkt des Feldes an der Grundlinie des Elternfeldes plus der halben x-Höhe des Elternelements aus.	Ausprobieren »
bottom	Richtet die Unterkante des ausgerichteten Teilbaums an der Unterkante des Zeilenfeldes aus.	Ausprobieren »
text-bottom	Richtet die Unterkante des Feldes an der Unterkante des Inhaltsbereichs des Elternelements aus.	Ausprobieren »
initial	Setzt die Eigenschaft auf ihren Standardwert zurück.	Ausprobieren »
inherit	Erbt die Eigenschaft vom Elternelement.

Übungen

Übung

Was bewirkt die CSS-Eigenschaft 'vertical-align'?

Sie passt die vertikale Position eines Elements relativ zu seinem Inline- oder Tabellenzellen-Feld an.Sie richtet den Inhalt eines Elements horizontal neu aus.Sie gilt für Inline-Level- und 'table-cell'-Elemente.Sie passt die Größe des Elements an.

Wo vertical-align wirkt

Was sie NICHT tut

Wie vertical-align funktioniert

Syntax

Beispiel der vertical-align Eigenschaft mit dem Wert "sub":

Ergebnis

Beispiel der vertical-align Eigenschaft mit dem Wert "middle":

Beispiel der vertical-align Eigenschaft mit dem Wert "super":

Beispiel der vertical-align Eigenschaft mit den Werten "top" und "bottom":

Beispiel mit einem Längenwert (Symbol am Text ausrichten)

Häufige Fallstricke

Werte

Übungen

Verwandte Eigenschaften