CSS - marginauto; - Kako radi
koristeći margin: auto da centrira blok element horizontalno je dobro poznata tehnika. Ali jeste li se ikad zapitali zašto ili kako radi? Da bismo odgovorili na ovo, prvo moramo pogledati kako margina: auto radi. Također u mješavini je što auto može napraviti na marginama, ako radi za vertikalno centriranje, i nekoliko drugih problema.
Ali prvo, što čini auto zapravo?
Definicija auto ovisi o elementi, vrste elemenata i kontekst. Na marginama, auto može značiti jednu od dvije stvari: zauzeti raspoloživi prostor ili 0 px. Ove dvije će definiraju različite izglede za element.
"auto" Uzimajući raspoloživi prostor
To je najčešće korištenje margine auto često se susrećemo. Dodjeljivanjem auto na lijevu i desnu marginu elementa jednako zauzimaju raspoloživi horizontalni prostor u spremniku elementa - i tako se element centrira.
Međutim, to će raditi samo za horizontalne margine (više o zašto kasnije), i to također neće raditi s plovkom i inline elementi i sam po sebi, također ne može raditi u apsolutan i fiksno postavljeni elementi (međutim vidjet ćemo kako to raditi).
Promašaj ploviti zauzimanjem raspoloživog prostora
Od auto u desnoj i lijevoj margini podjednako zauzimaju "raspoloživi" prostor, što mislite da će se dogoditi kada vrijednost postane auto daje se samo jednom od njih?
Lijeva ili desna margina s auto će zauzeti sve "raspoložive" prostore čineći element izgleda kao da je ispran u desno ili lijevo.
“auto” Izračunato na 0px
Kao što je već spomenuto, auto neće raditi u floated, inline i absolutnim elementima. Svi ti elementi već imaju odlučili su se za njihov raspored, tako da nema koristi od korištenja auto za margine i očekujući da se sredi baš tako.
To će pobijediti početnu svrhu korištenja nečega sličnog plutati. Stoga auto će u tim elementima imati vrijednost 0px.
auto Također neće raditi na tipičnom elementu bloka ako nema širinu. Svi primjeri koje sam do sada pokazao imaju širinu.
Širina vrijednosti auto će imati 0px margine. Širina elementa bloka obično pokriva spremnik kada je auto ili 100% i stoga margina auto bit će izračunato na 0px u tom slučaju.
Što se događa s vertikalnim marginama s vrijednošću auto?
auto u gornjoj i donjoj margini uvijek se izračunava na 0px (osim apsolutnih elemenata). Specifikacija W3C to kaže ovako:
“Ako “margin-top” ili “margin dna” je “auto”, njihova korištena vrijednost je 0 "
Zašto, pa to je do sada, misterija. To bi moglo biti zbog tipičnog vertikalnog protoka stranica, gdje Veličina stranice se povećava po visini. Dakle, centriranje elementa okomito u njegov spremnik neće ga učiniti centriranim, u odnosu na samu stranicu, za razliku od kad se radi horizontalno (u većini slučajeva).
I možda je to zbog istog razloga, odlučili dodati izuzetak za apsolutne elemente koji se mogu centrirati vertikalno duž cijele visine stranice.
To bi moglo biti i zbog efekta kolapsa margine (kolaps susjednih elemenata” margine) što je još jedna iznimka za vertikalne margine.
Međutim, čini se da je potonje malo vjerojatan slučaj - budući da elementi koji ne sruše njihove margine - kao što su Floats i elementi s prelijevanje osim vidljiv, i dalje dodjeljuju 0px okomite margine za auto.
Centriranje apsolutno pozicioniranih elemenata
Budući da postoji iznimka za apsolutno pozicionirane elemente, mi”ću koristiti auto vrijednost centrirajte okomito i vodoravno. Ali prije toga, moramo saznati kada će margin: auto zapravo rade kao što želimo u apsolutno pozicioniranom elementu.
Ovdje dolazi još jedna W3C specifikacija:
"Ako su sva tri." “lijevo”, “širina”, i “pravo” su “auto”: Prvo postavite bilo koji “auto” vrijednosti za “margin-left” i “margin-right” do 0… "
"Ako ništa od tri nije." “auto”: Ako oboje “margin-left” i “margin-right” su “auto”, riješiti jednadžbu pod dodatnim ograničenjem da dvije margine dobiju jednake vrijednosti "
To uglavnom govori vodoravan auto margine uhvatiti jednake prostore, vrijednosti za lijevo, širina i pravo ne bi smjelo biti auto , njihovu zadanu vrijednost. Dakle, sve što trebamo učiniti je dati im neke vrijednosti u apsolutno pozicioniranom elementu. lijevo i pravo trebao je jednake vrijednosti za savršeno centriranje.
Specifikacija također spominje nešto slično za vertikalne margine.
“Ako sve tri “vrh”, “visina”, i “dno” su automatski, postavljeni “vrh” u statičku poziciju ... ”
“Ako nitko od njih nije “auto”: Ako oboje “margin-top” i “margin dna” su “auto”, riješiti jednadžbu pod dodatnim ograničenjem da dvije granice dobivaju jednake vrijednosti ... ”
Dakle, za apsolutni element biti centrirano okomito, svoj vrh, visina, i dno vrijednosti ne bi smjele biti auto.
Kombinirajući sve ovo, to je ono što mi”dobit ću:
Zaključak
Ako želite ikada isprazniti element na stranici desno ili lijevo, a da ga ne omotate sljedećim elementima (kao što se događa s float-om), zapamtite da postoji mogućnost upotrebe auto za margine.
Pretvaranje elementa u apsolutni samo tako da se može centrirati vertikalno, možda nije dobra ideja. Postoje i druge opcije kao što su flexbox i CSS transformacija koje su prikladnije za njih.
