Wie zentriert „margin: 0 auto;' ein Element?

Das auto-Schlüsselwort in margin verstehen: 0 auto

Mit der margin-Eigenschaft können Sie den Abstand um ein Element steuern. Wenn Sie margin: 0 auto; verwenden, wird die Frage gestellt: „Was genau macht auto und wie beeinflusst es die Elementausrichtung?“

Auto, wenn es im zweiten Parameter der margin-Eigenschaft verwendet wird (z. B. margin-left: auto;) weist den Browser an, sowohl den linken als auch den rechten Rand automatisch zu bestimmen. Dadurch wird das Element effektiv horizontal innerhalb seines übergeordneten Containers zentriert.

Auto für den zweiten Parameter sorgt für eine gleichmäßige Raumverteilung zwischen dem linken und rechten Rand. Der erste Parameter 0 gibt an, dass der obere und untere Rand auf 0 gesetzt werden.

Betrachten Sie zur Veranschaulichung ein Beispiel, bei dem das übergeordnete Element eine Breite von 100 Pixel und das untergeordnete Element eine Breite von 50 Pixel hat. Automatisch ermittelt, dass 50 Pixel verfügbarer Platz vorhanden sind, um ihn gleichmäßig zwischen Rand links und Rand rechts zu verteilen:

var freeSpace = 100 - 50;
var equalShare = freeSpace / 2;

Dies führt zu den folgenden Randwerten:

margin-left: 25;
margin-right: 25;

Somit ist der Das untergeordnete Element ist innerhalb des übergeordneten Elements horizontal zentriert.

Es ist wichtig zu beachten, dass Sie die Breite des übergeordneten Elements nicht angeben müssen, damit dieses Verhalten auftritt. Definieren Sie einfach die Breite des untergeordneten Objekts und verwenden Sie margin: 0 auto; reicht aus, um es horizontal zu zentrieren.

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