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

Auto: Zentrieren eines Elements innerhalb seines Containers

Beim Definieren der Randeigenschaft mit Auto als zweitem Parameter wird das zu formatierende Element mühelos dargestellt zentriert innerhalb seines übergeordneten Containers. Dies geschieht, weil:

• Automatische Berechnung:Der Browser ermittelt automatisch den linken und rechten Rand und teilt den verfügbaren Platz gleichmäßig zwischen ihnen auf.
• Gleich Ränder: Der linke und der rechte Rand sind garantiert gleich groß, um eine Symmetrie zu gewährleisten Positionierung.

Aufschlüsselung der Randeigenschaften:

margin: 0 auto;

• 0 setzt den oberen und unteren Rand auf 0.
• automatisch berechnet automatisch den linken und rechten Rand, um ihn zu zentrieren Element.

Beispiel:

Betrachten Sie einen übergeordneten Container mit einer Breite von 100 Pixel und ein untergeordnetes Element mit einer Breite von 50 Pixel. Die Auto-Eigenschaft berechnet den verfügbaren Platz zwischen den Rändern des untergeordneten Elements:

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

Ergebnis:

margin-left: 25px
margin-right: 25px

Das untergeordnete Element wird nun im übergeordneten Container zentriert. Diese Positionierung kann durch [jsFiddle] (Link zu jsFiddle) in Aktion beobachtet werden. Beachten Sie, dass nur die Breite des untergeordneten Objekts angegeben werden muss, damit die Auto-Eigenschaft wirksam wird.

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