Co robi auto w margin: 0 auto?

127

Co robi autow margin:0 auto;?

Nie mogę zrozumieć, co to autorobi. Wiem, że czasami ma to wpływ na centrowanie obiektów. Dzięki.

css

— Jitendra Vyas
źródło

190

Po określeniu a widthna obiekcie, do którego się zastosowałeś margin: 0 auto, obiekt zostanie umieszczony centralnie w swoim kontenerze nadrzędnym.

Określenie autodrugiego parametru w zasadzie mówi przeglądarce, aby automatycznie określała lewy i prawy margines, co robi, ustawiając je jednakowo. Gwarantuje to, że lewy i prawy margines będą miały ten sam rozmiar. Pierwszy parametr 0 oznacza, że marginesy górny i dolny zostaną ustawione na 0.

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

Dlatego, aby podać przykład , jeśli rodzic ma 100 pikseli, a dziecko 50 pikseli, wówczas autowłaściwość określi, że jest 50 pikseli wolnego miejsca do udostępnienia między margin-lefta margin-right:

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

Co dałoby:

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

Spójrz na ten plik jsFiddle . Nie musisz określać szerokości rodzica, tylko szerokość obiektu potomnego.

— djdd87
źródło

ale nigdy nie definiujemy żadnej szerokości bodyi zawsze dajemy widthi margin:0 autoto#wrapper

— Jitendra Vyas

ok, to margines między treścią a obiektem zostanie automatycznie obliczony przez przeglądarkę.

— Jitendra Vyas,

Czy jest jakaś podobna wartość %? Chodzi mi o to, czy jest jakaś inna właściwość w css, która może dać taki sam wynik jak lewy i prawyauto

— Jitendra Vyas

@GenericTypeTea - a co się dzieje w margin:auto 0stanie?

— Jitendra Vyas,

Jednak dlaczego, kiedy używam marginesu: 20 auto, czy wydaje się to mieć wpływ na ustawienie lewej i prawej strony? Wydawałoby się, że wszystko, co zrobiłem, to dodać górny / dolny margines ...

— pitosalas

13

auto: przeglądarka ustawia margines. Wynik tego zależy od przeglądarki

margin: 0 określa automatycznie

* top and bottom margins are 0
* right and left margins are auto

— piszczel
źródło

9

Ze specyfikacji CSS na temat obliczania szerokości i marginesów dla niezastępowanych elementów na poziomie bloku w normalnym przepływie :

Jeśli zarówno „margin-left”, jak i „margin-right” to „auto”, ich użyte wartości są równe. Powoduje to wyśrodkowanie elementu w poziomie w stosunku do krawędzi bloku zawierającego.

— Gumbo
źródło

„ich używane wartości są równe”, co to oznacza?

— Jitendra Vyas

3

@ metal-gear-solid - Jeśli szerokość elementu nadrzędnego (określana przez przeglądarkę lub określoną szerokość) wynosi 100px, a szerokość elementu div dziecka to 50px. Wtedy margin: 0 auto określi, że jest 50 pikseli dostępnego miejsca. Następnie podzieli to przez 2, dając 25. Lewy i prawy margines są wtedy ustawione na 25, czyli wartości są ustawione jednakowo.

— djdd87

1

Używane wartości odnoszą się do faktycznie używanych wartości w zależności od rzeczywistych właściwości wizualnych elementu, który używa tej właściwości i zawierającego go bloku. Połączona sekcja zawiera formułę używaną do obliczania różnicy poziomej między elementem a zawierającym go blokiem. Ta różnica jest następnie równo wypluwana i używana jako rzeczywiste wartości marginesów poziomych.

— Gumbo,

6

margin:0 auto;

0dotyczy góra-dół i autolewo-prawo. Oznacza to, że lewy i prawy margines przyjmą automatyczny margines w zależności od szerokości elementu i kontenera.

Generalnie, jeśli chcesz umieścić dowolny element w pozycji środkowej, margin:autodziała idealnie. Ale działa tylko w elementach blokowych.

— user3237573
źródło

1

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

0 to góra-dół i auto dla lewej-prawej. Przeglądarka ustawia margines.

— jaffer sathick
źródło

1

Staje się jaśniejsze po pewnym wyjaśnieniu, jak działają te dwie wartości.

Właściwość margin jest skrótem dla:

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

Dlaczego więc tylko dwie wartości?

Cóż, możesz wyrazić margines czterema wartościami w następujący sposób:

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

co oznaczałoby 10 pikseli na górze, 20 pikseli na prawo, 15 pikseli na dole, 5 pikseli na lewo

Podobnie możesz również wyrazić za pomocą dwóch wartości w ten sposób:

margin: 20px 10px;

Dałoby to margines 20 pikseli od góry i od dołu oraz 10 pikseli z lewej i prawej strony.

A jeśli ustawisz:

margin: 20px auto;

To oznacza górny i dolny margines 20 pikseli oraz lewy i prawy margines auto. A auto oznacza, że lewy / prawy margines jest ustawiany automatycznie na podstawie kontenera. Jeśli Twój element jest elementem typu blokowego, co oznacza, że jest to prostokąt i zajmuje całą szerokość widoku, to automatycznie ustawia lewy i prawy margines tak samo, a tym samym element jest wyśrodkowany.

— Angus Comber
źródło

-3

Jest to uszkodzony / bardzo trudny w użyciu zamiennik znacznika „środkowego”. Przydaje się, gdy potrzebujesz złamanych tabel i niedziałającego wyśrodkowania bloków i tekstu.

— Danny
źródło