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

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

Das Verständnis der vertikalen Ausrichtung in CSS kann beim Erstellen vertikal ausgerichteter Layouts von entscheidender Bedeutung sein. Trotz der Anwendung geeigneter Vertical-Alignment-Eigenschaften können sich Elemente weiterhin unvorhersehbar verschieben.

Nehmen Sie das bereitgestellte Beispiel:

<div>
  <a></a><a></a>
  <span>Some text</span>
</div>

Hier bleibt das Span-Element nach unten gedrückt, obwohl beide „Vertical-Alignment“-Eigenschaften angewendet werden :Mitte;" und „vertical-align:top;“.

Der Schlüssel zur Lösung dieses Problems liegt im Verständnis, dass „vertikal-align“ für die auszurichtenden Elemente gilt, nicht für deren übergeordnete Container. Um die untergeordneten Elemente des „div“-Elements vertikal auszurichten, verwenden Sie die CSS-Regel:

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

Mit dieser Änderung werden die untergeordneten Elemente des „div“-Elements innerhalb des übergeordneten div vertikal ausgerichtet.

Hinweis: „vertikal ausrichten“ richtet sich relativ zur aktuellen Textzeile aus, nicht zur vollen Höhe des Container-Divs. Um Elemente innerhalb eines größeren übergeordneten Divs zu zentrieren, legen Sie die Eigenschaft „line-height“ des übergeordneten Divs anstelle seiner Höhe fest. Ein praktisches Beispiel finden Sie im bereitgestellten jsfiddle-Link in der ursprünglichen Frage.

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