Verstehen der vertikalen Ausrichtung für Inline-Block-Elemente

Die Dokumentation legt zwar nahe, dass die vertikale Ausrichtung für Inline-Block-Elemente funktioniert, es kann jedoch verwirrend sein, wann Es wird nicht wie erwartet ausgerichtet. Lassen Sie uns zur Verdeutlichung tiefer in das Konzept eintauchen.

Vertical-Aligns Geltungsbereich

Im Gegensatz zu text-align, das die Textausrichtung innerhalb des Inhaltsbereichs seines übergeordneten Elements anpasst, ist Vertical-Align align arbeitet innerhalb der Zeilenbox des Elements. Eine Zeilenbox ist der rechteckige Bereich, der die von einem Inline-Level-Element in einer einzelnen Zeile generierten Boxen umfasst.

Beispiel:

Bedenken Sie den folgenden Code:

#wrapper {
  border: 1px solid black;
  width: 500px;
  height: 500px;
}
#content {
  border: 1px solid black;
  display: inline-block;
  vertical-align: middle;
}

Problem:
In diesem Beispiel wird durch die Einstellung „vertikal-align: middle“ das #content-Element nicht vertikal zentriert #wrapper div.
Erläuterung:
Vertical-align richtet das nicht aus inline-block-Element relativ zu seinem Containerblock, sondern innerhalb seiner eigenen Zeilenbox. Da das #content-Element nur Text enthält, der basierend auf seiner standardmäßigen Vertical-Align:-Grundlinie bereits vertikal zentriert ist, hat es keinen Einfluss auf die endgültige Ausrichtung.
Fazit:
 
Wenn Sie mit der vertikalen Ausrichtung für Inline-Block-Elemente arbeiten, ist es wichtig zu verstehen, dass der Inhalt innerhalb des Zeilenfelds des Elements und nicht im enthaltenden Block ausgerichtet wird. Beachten Sie dies, um die gewünschte vertikale Positionierung in Ihren Seitenelementen zu erreichen.