Wie positioniert die Eigenschaft „vertikal ausrichten' Inline-Elemente?

Verstehen der Vertical-Align-Eigenschaft

Beim Arbeiten mit vertikalen Ausrichtungen ist das Verständnis der Prinzipien hinter der „vertikal-align“-Eigenschaft von entscheidender Bedeutung. Diese Eigenschaft bestimmt, wie ein Inline-Element vertikal relativ zu seinem umgebenden Text oder seinen umgebenden Elementen positioniert wird.

Inline-Element-Anforderung

Die Eigenschaft „vertical-align“ kann nur angewendet werden zu Inline-Elementen wie span, img und a. Inline-Elemente fließen auf natürliche Weise im Textfluss.

Überlegungen zur Zeilenhöhe

Für Elemente, für die normalerweise keine Zeilenhöhe angegeben ist, wie z. B. Bilder oder Symbole, Es muss eine Zeilenhöhe festgelegt werden, um eine ordnungsgemäße vertikale Ausrichtung zu ermöglichen.

Höhenwertanforderung

Die Höhe des Elements, auf das „vertikal ausrichten“ angewendet wird, sollte einen Wert haben statischer Wert (nicht Prozent oder automatisch), der eine konsistente vertikale Ausrichtung gewährleistet.

Enthaltendes Element vs. Zielelement

Die Eigenschaft „vertical-align“ kann auf angewendet werden sowohl das enthaltende Element als auch das Zielelement, auf das es sich auswirken soll. Es wird jedoch bevorzugt, es auf das enthaltende Element anzuwenden, da es sich auf alle Inline-Elemente in diesem Container auswirkt.

Grundlegendes zu Zeilenfeldern

Die Eigenschaft „vertical-align“ richtet die aus vertikale Mitte des Elements mit dem Zeilenrahmen des umgebenden Textes. Das Zeilenfeld umfasst eine Textzeile und nicht die gesamte Höhe des Containers.

JsFiddle-Demonstration

Das bereitgestellte JsFiddle-Beispiel veranschaulicht die Prinzipien der vertikalen Ausrichtung. Der äußere Container ist auf eine Höhe von 200 Pixel eingestellt, und das innere Element ist auf Inline-Block und ebenfalls auf eine Höhe von 200 Pixel eingestellt. Der Header innerhalb des inneren Elements ist auf „vertical-align: middle;“ eingestellt.

Das erwartete Ergebnis ist, dass der Header innerhalb des inneren Elements vertikal zentriert ist. Da die Kopfzeile jedoch mehrere Textzeilen enthält, wird die vertikale Ausrichtung auf die einzelnen Zeilenfelder angewendet, nicht auf die gesamte Höhe. Dadurch wird der Header nur teilweise innerhalb des Containers ausgerichtet.

Das obige ist der detaillierte Inhalt vonWie positioniert die Eigenschaft „vertikal ausrichten' Inline-Elemente?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!