Warum werden Inline-/Inline-Block-Elemente innerhalb eines Div nicht vertikal ausgerichtet?

Inline-/Inline-Block-Elemente vertikal ausrichten

Bei dem Versuch, mehrere Inline- und Inline-Block-Elemente innerhalb eines Divs vertikal auszurichten, a Der Benutzer stößt auf ein Problem, bei dem ein Span-Element tiefer als erwartet im Container positioniert bleibt. Trotz der Anwendung von Vertical-Align:Middle; und Vertical-Align:top; zur Spanne bleibt die Ausrichtung unverändert.

Die CSS-Eigenschaft Vertical-Align steuert die vertikale Positionierung von Elementen gegenüber der Textgrundlinie. Diese Eigenschaft gilt jedoch für die auszurichtenden Elemente, nicht für deren übergeordnete Elemente. Um die untergeordneten Elemente innerhalb des Div vertikal auszurichten, sollte der Benutzer stattdessen direkt auf die untergeordneten Elemente zielen:

div > * {
    vertical-align:middle;  // Align children to middle of line
}

Dieser überarbeitete Code stellt sicher, dass alle untergeordneten Elemente innerhalb des Div vertikal zentriert sind. Beachten Sie, dass die vertikale Ausrichtung Elemente relativ zur aktuellen Textzeile ausrichtet, nicht zur gesamten Höhe des übergeordneten Div. Wenn die Absicht besteht, ein größeres Div mit zentrierten Elementen zu erstellen, kann die Eigenschaft line-height anstelle von height verwendet werden. Ein funktionierendes Beispiel finden Sie unter dem bereitgestellten jsfiddle-Link:

[jsfiddle link]

Das obige ist der detaillierte Inhalt vonWarum werden Inline-/Inline-Block-Elemente innerhalb eines Div nicht vertikal ausgerichtet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!