Wie kann ich Inline- und Inline-Block-Elemente in CSS vertikal ausrichten?

Vertikale Ausrichtung von Inline- und Inline-Block-Elementen in CSS: Behebung von Fehlausrichtungsproblemen

Vertikale Ausrichtung von Inline- und Inline-Block-Elementen innerhalb eines Container-Div kann eine Herausforderung darstellen. Wie im bereitgestellten Beispiel hervorgehoben, führt die Manipulation der Vertical-Align-Eigenschaft allein am übergeordneten Div (div) nicht zum gewünschten Ergebnis, wenn ein Span-Element nach unten verschoben zu sein scheint.

Ursache der Fehlausrichtung :

Die Vertical-Align-Eigenschaft beeinflusst die Ausrichtung der vertikal ausgerichteten Elemente, nicht deren übergeordnetes Element. Daher ist die Einstellung Vertical-Align:Middle; oder Vertical-Align:top; auf dem Div wirkt sich nur auf seine eigene Ausrichtung aus und nicht auf die darin enthaltenen Elemente.

Lösung:

Um die untergeordneten Elemente des Div vertikal auszurichten, wenden Sie die Funktion „Vertical-Align“ an Eigenschaft direkt an sie zuweisen:

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

Mit dieser Anpassung wird jedes untergeordnete Element innerhalb des Div nun vertikal an der Mitte des div ausgerichtet Zeile.

Zusätzlicher Hinweis:

Denken Sie daran, dass sich die vertikale Ausrichtung auf die aktuelle Textzeile bezieht, nicht auf die gesamte Höhe des übergeordneten Div. Wenn eine vertikale Zentrierung über die gesamte Höhe des übergeordneten Divs gewünscht wird, legen Sie die Eigenschaft „line-height“ des Divs und nicht seine Höhe fest. Ein anschauliches Beispiel finden Sie unter dem bereitgestellten JsFiddle-Link.

Das obige ist der detaillierte Inhalt vonWie kann ich Inline- und Inline-Block-Elemente in CSS vertikal ausrichten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!