Warum funktioniert die vertikale Ausrichtung nicht für Inline-Block-Elemente?

Vertikale Ausrichtung in HTML: Ihre Einschränkungen verstehen

Die vertikale Ausrichtung, ein wertvolles Werkzeug zum vertikalen Ausrichten von Elementen, ist auf bestimmte HTML-Elemente beschränkt: Inline, Inline-Blöcke, Bilder und Tabellen. Im Gegensatz zu text-align muss die vertikale Ausrichtung auf das untergeordnete Element und nicht auf das übergeordnete Element angewendet werden.

Trotz dieser Richtlinien stoßen einige Entwickler auf Schwierigkeiten, wenn sie versuchen, Vertical-align:middle auf Inline-Block-Elemente anzuwenden. Um zu verstehen, warum, müssen wir uns mit dem Konzept der Linienkästen befassen.

Linienkästen und vertikale Ausrichtung

Vertikale Ausrichtung richtet Elemente nicht innerhalb ihres enthaltenden Blocks aus, sondern innerhalb ihre Leitungsboxen. Ein Zeilenfeld ist der rechteckige Bereich, der den Inhalt eines Elements auf Inline-Ebene umfasst.

Zum Beispiel stellt jede Textzeile innerhalb eines mehrzeiligen Absatzes ein Zeilenfeld dar. Aus diesem Grund funktioniert die vertikale Ausrichtung perfekt für Inline-Inhalte wie

Tags.

Beispiel:

p { border: 3px solid; width: 350px; height: 200px; line-height: 28px; padding: 15px; }

html, body { height: 100%; }

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p>

In diesem Beispiel wird jede Textzeile dank der angegebenen Zeile vertikal innerhalb ihres Zeilenrahmens ausgerichtet. Höhe.

Fazit

Inline-Blockelemente, horizontal innerhalb positioniert Ihrem enthaltenden Block fehlen die vertikalen Ausrichtungsmöglichkeiten von Inline-Inhalten. Um eine vertikale Ausrichtung zu erreichen, muss man entweder auf alternative Methoden zurückgreifen oder die Konvertierung von Inline-Blöcken in Elemente auf Blockebene in Betracht ziehen.

Das obige ist der detaillierte Inhalt vonWarum funktioniert die vertikale Ausrichtung nicht für Inline-Block-Elemente?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!