Warum zentriert „margin: auto' Elemente in HTML nicht vertikal?

Elemente vertikal zentrieren mit „margin: auto“

Das Problem:

In HTML wird „margin: auto“ angewendet " zu einem Element zentriert es normalerweise horizontal innerhalb seines Containers. Aber warum verhält es sich vertikal nicht genauso?

Erklärung:

Gemäß den CSS-Spezifikationen (Abschnitt 10.6.2 von CSS2.1) sind Block- Ebenenelemente (z. B. Divs) werden ohne automatische Zentrierung vertikal von oben nach unten positioniert. Dies liegt daran, dass vertikale Ränder unter bestimmten Bedingungen zusammenbrechen können (z. B. Rand auf dem übergeordneten Element).

In einem Szenario, in dem nur ein Element auf Blockebene mit automatischen Rändern in einem Container mit automatischer Höhe vorhanden ist, ist es die Oberseite und die unteren Ränder werden sowieso Null. Wenn jedoch mehrere Elemente auf Blockebene oder Out-of-Flow-Boxen (z. B. Abstand) vorhanden sind, wird das Verhalten der automatischen Ränder mehrdeutig und erfordert eine manuelle Steuerung.

Inline-Elemente und Floats:

Bei Inline-Elementen (einschließlich atomaren Inlines) und Floats werden die automatischen linken und rechten Ränder ebenfalls auf Null gesetzt. Dies liegt daran, dass Inline-Level-Boxen entlang von Linienboxen angeordnet sind und Floats eindeutigen Layoutregeln folgen.

Absolut positionierte Boxen:

Automatische Ränder verhalten sich bei absolut positionierten Boxen anders Boxen. Da sie unabhängig von anderen Elementen im gleichen Positionierungskontext sind, können sie mithilfe der automatischen oberen und unteren Ränder vertikal zentriert werden.

Flexbox:

In Flexbox automatische Ränder verhalten sich mal wieder anders. Flex-Elemente sind sich gegenseitig bewusst, einschließlich ihrer Anwesenheit oder Abwesenheit. Dies ermöglicht eine präzisere Kontrolle des Randverhaltens, einschließlich der vertikalen Zentrierung.

Das obige ist der detaillierte Inhalt vonWarum zentriert „margin: auto' Elemente in HTML nicht vertikal?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!