Wie zentriert CSS „margin: auto' Elemente?

Die Magie von „Auto“ in CSS-Rändern

Es ist allgemein bekannt, dass CSS-Ränder den Abstand um ein Element bestimmen. Aber was ist, wenn wir „auto“ als Wert verwenden?

Die Rolle von „Auto“ verstehen

Bei Anwendung auf den zweiten Parameter von margin aktiviert „auto“. Der Browser ist dafür verantwortlich, den linken und rechten Rand selbst zu bestimmen. Dies wird erreicht, indem beide Ränder gleich eingestellt werden.

Beispiel: Zentrieren von Objekten

Betrachten wir ein Szenario, in dem wir einen übergeordneten Container mit einer Breite von 100 Pixeln und ein untergeordnetes Element haben mit einer Breite von 50px. Durch die Verwendung von „margin: 0 auto“ berechnet der Browser den verbleibenden Platz (50 Pixel) und teilt ihn gleichmäßig auf den linken und rechten Rand auf.

Dies führt zu folgenden Berechnungen:

freeSpace = 100 - 50 = 50
equalShare = freeSpace / 2 = 25

margin-left: 25
margin-right: 25

Folglich wird das untergeordnete Element im übergeordneten Container zentriert.

Zusätzlich Hinweise

• Es ist nicht erforderlich, die Breite des übergeordneten Elements anzugeben, damit „auto“ funktioniert. Es ist nur die Breite des untergeordneten Objekts erforderlich.
• „Auto“ kann auch für den ersten Parameter des Rands verwendet werden, was angibt, dass der obere und der untere Rand gleich eingestellt werden sollten.

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