Warum wirkt sich „vertikal ausrichten' auf gleichrangige Elemente aus, nicht nur auf das gezielte Inline-Block-Element?

Vertikal ausgerichtete Geschwister, nicht sich selbst

Das Verständnis der vertikalen Ausrichtung ist nicht so einfach, wie man vielleicht erwarten würde. Wie ein Beispiel zeigt, ist die Anwendung von Vertical-Align nur auf einen Inline-Block vertikal ausgerichtet, alles andere außer dem Inhalt selbst. Ist dies das beabsichtigte Verhalten?

Vertical-align definiert erwartungsgemäß die vertikale Ausrichtung eines Elements innerhalb seines übergeordneten Containers. Entgegen der Erwartung, dass nur die Wenn der Inhalt ausgerichtet wird, richtet der Browser alle Elemente aus, einschließlich des übergeordneten Elements p und des Textes innerhalb von .

Zur Verdeutlichung: Ohne Ausrichtung wird das Element und sein Inhalt werden vom Browser mit gleicher Höhe und vertikaler Ausrichtung am oberen Rand des p gerendert.

Anwenden von Vertical-align: middle auf den Ändert die vertikale Ausrichtung aller Elemente innerhalb des p. Das p selbst ist nun vertikal am Mittelpunkt der Höhe von ausgerichtet und der Text innerhalb von bleibt nach oben ausgerichtet und sieht so aus, als ob es nicht vertikal ausgerichtet wäre.

Das obige ist der detaillierte Inhalt vonWarum wirkt sich „vertikal ausrichten' auf gleichrangige Elemente aus, nicht nur auf das gezielte Inline-Block-Element?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!