Wie funktioniert die vertikale Ausrichtung in CSS tatsächlich?

Vertikale Ausrichtung in CSS: Die Nuancen verstehen

Mit der Vertical-Align-Eigenschaft können Sie ein Inline-Element vertikal innerhalb seines übergeordneten Elements positionieren. Allerdings kann sein Verhalten unvorhersehbar sein, es sei denn, Sie verstehen die zugrunde liegenden Prinzipien.

Inline-Elemente und Höhe

Vertical-align betrifft nur Inline-Elemente. Elemente wie

und <div> sind auf Blockebene und nicht betroffen. Für Inline-Elemente ohne inhärente Zeilenhöhe, wie zum Beispiel und müssen Sie eine explizit mit der Eigenschaft line-height festlegen.

Höhe und vertikale Ausrichtung

Die Höhe des übergeordneten Elements muss einen statischen Wert haben (d. h. nicht automatisch oder prozentual). Wenn die Höhe nicht angegeben ist, berechnet der Browser sie basierend auf dem Inhalt, was zu unerwarteten Ergebnissen führen kann.

Positionierung von Inline-Elementen

Im Gegensatz zu text-align , was für das enthaltende Element auf Blockebene gilt, Vertical-Align sollte auf das Inline-Element angewendet werden, das Sie positionieren möchten.

Browserunterschiede

Bei älteren Browsern ist dies möglicherweise nicht der Fall Unterstützt konsequent die vertikale Ausrichtung. Moderne Browser kommen damit jedoch gut zurecht, auch wenn sie für Nicht-Inline-Elemente verwendet werden.

Beispiel: Zentrieren von Text

Angenommen, Sie haben den folgenden HTML-Code:

<div>

Um den Text vertikal in #inner zu zentrieren, wenden Sie „vertikal-align: middle“ auf #header an:

#header {
  display: inline-block;
  line-height: 1em;
  margin: 0;
  vertical-align: middle;
}

Beachten Sie, dass #inner in diesem Beispiel ein Inline-Block ist Element mit fester Höhe.

Das obige ist der detaillierte Inhalt vonWie funktioniert die vertikale Ausrichtung in CSS tatsächlich?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!