Höhe und vertikale Ausrichtung

Die Höhe des übergeordneten Elements muss einen statischen Wert haben (d. h. nicht automatisch oder prozentual). Wenn die Höhe nicht angegeben ist, berechnet der Browser sie basierend auf dem Inhalt, was zu unerwarteten Ergebnissen führen kann.

Inline-Elemente positionieren

Im Gegensatz zu text-align , was für das enthaltende Element auf Blockebene gilt, Vertical-Align sollte auf das Inline-Element angewendet werden, das Sie positionieren möchten.

Browser Unterschiede

Ältere Browser unterstützen die vertikale Ausrichtung möglicherweise nicht konsistent. Moderne Browser kommen damit jedoch gut zurecht, auch wenn sie für nicht-inline-Elemente verwendet werden.

Beispiel: Zentrieren von Text

Angenommen, Sie haben den folgenden HTML-Code:

Um den Text vertikal in #inner zu zentrieren, wenden Sie Vertical-Align: Middle an #header:
#header {
  display: inline-block;
  line-height: 1em;
  margin: 0;
  vertical-align: middle;
}
Beachten Sie, dass in diesem Beispiel #inner ein Inline-Block-Element mit einer festen Höhe ist.