Warum werden Inline-Blockelemente in ihren Containern nicht vertikal ausgerichtet?

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;
}

<div>

Problem:

In diesem Beispiel Einstellung Vertical-Align: Middle zentriert das #content-Element nicht vertikal innerhalb des #wrapper-Div.

Erklärung:

Vertical-align richtet das Inline-Block-Element nicht vertikal aus 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.

Schlussfolgerung:

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.

Das obige ist der detaillierte Inhalt vonWarum werden Inline-Blockelemente in ihren Containern nicht vertikal ausgerichtet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!