Wie richtet man Inline-/Inline-Block-Elemente innerhalb eines Div vertikal aus?

Vertikale CSS-Ausrichtung von Inline-/Inline-Block-Elementen

Beim Versuch, Inline- oder Inline-Block-Elemente innerhalb eines Divs vertikal auszurichten, ist dies der Fall Es ist wichtig zu beachten, dass sich die Eigenschaft „vertikal ausrichten“ auf die untergeordneten Elemente und nicht auf das übergeordnete Element bezieht. Im bereitgestellten HTML und CSS verschiebt sich die Spanne aufgrund der vertikalen Ausrichtung, die auf das div-Element angewendet wird, hartnäckig nach unten.

Um die Elemente richtig vertikal auszurichten, wenden Sie die Vertical-Align-Eigenschaft auf die untergeordneten Elemente innerhalb des div an :

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

Diese Änderung stellt sicher, dass alle Inline- und Inline-Block-Elemente innerhalb des Div wie beabsichtigt vertikal ausgerichtet werden: [https://jsfiddle.net/dfmx123/TFPx8/1186/](https://jsfiddle.net/dfmx123/TFPx8/1186/)

Zusätzlicher Hinweis:

Die vertikale Ausrichtung bezieht sich auf die aktuelle Textzeile, nicht auf die Höhe des übergeordneten Div. Um eine vertikale Zentrierung innerhalb eines Divs zu erreichen, das höher als die ausgerichteten Elemente ist, legen Sie die Eigenschaft „line-height“ des Divs anstelle seiner Höhe fest. Eine Demonstration finden Sie im aktualisierten bereitgestellten JSFiddle-Beispiel.

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