Vertikale Ausrichtung mit der Vertical-Align-Eigenschaft

In der Welt des Webdesigns spielt die vertikale Ausrichtung eine entscheidende Rolle bei der Verbesserung der visuellen Ästhetik und Inhalte effektiv organisieren. Die CSS-Eigenschaft „Vertical-Align“ bietet eine Möglichkeit, Inline-Elemente innerhalb eines übergeordneten Elements vertikal zu positionieren, sodass Entwickler eine präzise Ausrichtung erreichen können. Allerdings kann es eine verwirrende Aufgabe sein, seine Feinheiten zu verstehen.

Bestimmen der vertikalen Ausrichtung

Um die Mechanismen der vertikalen Ausrichtung zu verstehen, müssen wir zunächst anerkennen, dass sie nur für gilt Inline-Elemente. Diese Elemente wie , oder Text innerhalb von Elementen auf Blockebene belegen eine einzelne Zeile und haben keine implizite Höhe. Darüber hinaus ist es wichtig, eine Zeilenhöhe für Elemente anzugeben, denen eine inhärente fehlt.

Die Höheneigenschaft des übergeordneten Elements muss einen statischen Wert besitzen, damit die vertikale Ausrichtung wirksam wird. Automatische oder Prozentwerte reichen nicht aus. Darüber hinaus stoßen verschiedene moderne Browser auf Schwierigkeiten, die vertikale Ausrichtung bei Nicht-Inline-Elementen genau darzustellen.

Elementauswahl für die Ausrichtung

Ein häufiges Missverständnis ist, dass die vertikale Ausrichtung auf angewendet wird das Containerelement, ähnlich wie text-align. Es sollte jedoch dem Element zugewiesen werden, das eine vertikale Positionierung erfordert. Wenn wir beispielsweise ein

-Tag innerhalb eines

zentrieren möchten, sollte die Vertical-Align-Eigenschaft direkt auf

angewendet werden.

Praktisches Beispiel

Betrachten Sie den folgenden HTML- und CSS-Code:

HTML:

CSS:
#outer {
  height: 200px;
  text-align: center;
}

#inner {
  display: inline-block;
  height: 200px;
  vertical-align: middle;
}

#header {
  display: inline-block;
}
Intuitiv könnte man erwarten, dass das 
-Element vertikal innerhalb der 
-Elemente zentriert ist. Dies ist jedoch nicht der Fall. Um zu verstehen, warum, ist es wichtig, sich daran zu erinnern, dass die vertikale Ausrichtung Zeile für Zeile innerhalb des übergeordneten Elements erfolgt. Wenn daher der Inhalt des 
-Elements eine einzelne Zeile überschreitet, wird 
 nicht wie erwartet ausgerichtet.
Um dieses Konzept zu veranschaulichen, können wir den HTML-Code ändern:
Wie Sie sehen können, ist das 
-Element jetzt vertikal innerhalb des übergeordneten Elements zentriert, da die vertikale Ausrichtung auf der Zeilenhöhe des Textes basiert.