Was macht auto in margin: 0 auto?

125

Was macht automan in margin:0 auto;?

Ich kann nicht verstehen, was autotut. Ich weiß, dass es manchmal dazu führt, dass Objekte zentriert werden. Vielen Dank.

css Jitendra Vyas
quelle

Antworten:

189

Wenn Sie widthfür das Objekt, auf das Sie angewendet haben, ein a angegeben haben margin: 0 auto, befindet sich das Objekt zentral im übergeordneten Container.

Wenn Sie autoals zweiten Parameter angeben, wird der Browser grundsätzlich angewiesen , den linken und rechten Rand automatisch zu bestimmen, indem er sie gleichermaßen festlegt. Dies garantiert, dass der linke und der rechte Rand auf die gleiche Größe eingestellt werden. Der erste Parameter 0 gibt an, dass sowohl der obere als auch der untere Rand auf 0 gesetzt werden.

margin-top:0;
margin-bottom:0;
margin-left:auto;
margin-right:auto;

Um Ihnen ein Beispiel zu geben : Wenn das übergeordnete Element 100 Pixel und das untergeordnete Element 50 Pixel groß ist, bestimmt die autoEigenschaft, dass 50 Pixel freien Speicherplatz zwischen margin-leftund gemeinsam genutzt werden können margin-right:

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

Welches würde geben: 

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

Schauen Sie sich diese jsFiddle an . Sie müssen nicht die übergeordnete Breite angeben, sondern nur die Breite des untergeordneten Objekts.

djdd87
quelle
aber wir definieren nie Breite bodyund wir immer geben widthund margin:0 autozu#wrapper
Jitendra Vyas
OK, dann wird der Abstand zwischen Körper und Objekt vom Browser automatisch berechnet.
Jitendra Vyas
Gibt es einen ähnlichen Wert in %? Ich meine, gibt es eine andere Eigenschaft in CSS, die das gleiche Ergebnis wie links und rechts liefern kannauto
Jitendra Vyas
@GenericTypeTea - und was passiert unter bestimmten margin:auto 0Bedingungen?
Jitendra Vyas
Warum jedoch, wenn ich margin: 20 auto verwende, scheint dies die Positionierung von links nach rechts zu beeinflussen? Es scheint, dass alles, was ich getan habe, war, den oberen / unteren Rand hinzuzufügen ...
Pitosalas
13

auto: Der Browser legt den Rand fest. Das Ergebnis ist vom Browser abhängig

margin: 0 gibt automatisch an

* top and bottom margins are 0
* right and left margins are auto
Schienbein
quelle
9

Aus der CSS-Spezifikation zur Berechnung von Breiten und Rändern für nicht ersetzte Elemente auf Blockebene im normalen Fluss :

Wenn sowohl 'Rand-Links' als auch 'Rand-Rechts' 'Auto' sind, sind ihre verwendeten Werte gleich. Dadurch wird das Element horizontal in Bezug auf die Kanten des enthaltenen Blocks zentriert.

Gumbo
quelle
"ihre verwendeten Werte sind gleich" was bedeutet das?
Jitendra Vyas
3
@ metal-gear-solid - Wenn die Breite des Elternteils (vom Browser oder durch die angegebene Breite festgelegt) 100 Pixel und die Breite Ihres untergeordneten Divs 50 Pixel beträgt. Dann bestimmt margin: 0 auto, dass 50 Pixel verfügbarer Speicherplatz vorhanden sind. Es wird dann durch 2 geteilt, was 25 ergibt. Der linke und der rechte Rand werden dann beide auf 25 gesetzt, dh die Werte werden gleich gesetzt.
djdd87
1
Die verwendeten Werte beziehen sich auf die tatsächlich verwendeten Werte in Abhängigkeit von den tatsächlichen visuellen Eigenschaften des Elements, das diese Eigenschaft verwendet, und seines enthaltenden Blocks. Der verknüpfte Abschnitt enthält eine Formel, mit der die horizontale Differenz zwischen einem Element und seinem enthaltenden Block berechnet wird. Diese Differenz wird dann gleichmäßig ausgespuckt und als tatsächliche horizontale Randwerte verwendet.
Gumbo
6 
margin:0 auto;

0ist für oben-unten und autofür links-rechts. Dies bedeutet, dass der linke und rechte Rand einen automatischen Rand entsprechend der Breite des Elements und der Breite des Containers annehmen.

Wenn Sie ein Element in die Mittelposition bringen möchten, margin:autofunktioniert dies im Allgemeinen einwandfrei. Es funktioniert aber nur in Blockelementen.

user3237573
quelle
1 
margin-top:0;
margin-bottom:0;
margin-left:auto;
margin-right:auto;

0 steht für oben-unten und Auto für links-rechts. Der Browser legt den Rand fest.

Jaffer Sathick
quelle
0

Es wird klarer, wenn erklärt wird, wie die beiden Werte funktionieren.

Die Margin-Eigenschaft ist eine Abkürzung für:

margin-top
margin-right
margin-bottom
margin-left

Wie kommt es also, dass nur zwei Werte vorliegen?

Nun, Sie können den Rand mit vier Werten wie folgt ausdrücken:

margin: 10px, 20px, 15px, 5px;

das würde 10px oben, 20px rechts, 15px unten, 5px links bedeuten

Ebenso können Sie auch mit zwei Werten wie folgt ausdrücken:

margin: 20px 10px;

Dies würde Ihnen einen Rand von 20 Pixel oben und unten und 10 Pixel links und rechts geben.

Und wenn Sie einstellen:

margin: 20px auto;

Dann bedeutet das oberen und unteren Rand von 20px und linken und rechten Rand von Auto. Und auto bedeutet, dass der linke / rechte Rand basierend auf dem Container automatisch festgelegt wird. Wenn es sich bei Ihrem Element um ein Element vom Typ Block handelt, dh um ein Feld, das die gesamte Breite der Ansicht einnimmt, werden der linke und der rechte Rand automatisch gleich eingestellt, sodass das Element zentriert wird.

Angus Comber
quelle
-3

Es ist ein defekter / sehr schwer zu verwendender Ersatz für das "Center" -Tag. Dies ist praktisch, wenn Sie defekte Tabellen und eine nicht funktionierende Zentrierung für Blöcke und Text benötigen.

Danny
quelle