CSS - marginauto; - Ako to funguje

Použitím margin: auto na centralizáciu blokového prvku horizontálne je dobre známa technika. Ale premýšľali ste niekedy, prečo alebo ako to funguje? Ak chcete odpovedať na túto otázku, najskôr sa musíme pozrieť na to, ako funguje automatická práca: Aj v zmesi je čo auto môže to robiť v okrajoch, ak pracuje pre vertikálne centrovanie a niekoľko ďalších otázok.

Ale najprv, čo robí auto vlastne robiť?

Definícia auto sa mení s prvky, prvkov a kontext. V okrajoch, auto môže znamenať jednu z dvoch vecí: zaberať dostupný priestor alebo 0 px. Tieto dve budú definovať rôzne rozloženia prvku.

"auto" Zachytávanie dostupného priestoru

Toto je najbežnejšie používanie marže auto narazíme často. Priradením auto do ľavého a pravého okraja prvku, zaberajú voľný horizontálny priestor v kontajneri prvku rovnako - a tak sa prvok dostane do stredu.

Bude to však fungovať len pre horizontálne rozpätia (viac na prečo neskôr) a tiež nebude fungovať s floated a inline prvky a sama o sebe tiež nemôže fungovať v absolútny a pevne umiestnené prvky (budeme však vidieť, ako tieto práce urobiť).

Faux Float tým, že zdvihne dostupný priestor

od tej doby auto v pravom aj ľavom okraji zaberajú rovnako "dostupný" priestor, čo si myslíte, že sa stane, keď hodnota auto je daná iba jednému z nich?

Ľavý alebo pravý okraj s auto bude zaberať všetok "dostupný" priestor, čím bude prvok vyzerať tak, ako by bol prepláchnutý vpravo alebo vľavo.

“auto” Vypočítané na 0 px

Ako už bolo uvedené, auto nebudú pracovať s pohyblivými, inline a absolútnymi prvkami. Všetky tieto prvky už majú rozhodli o ich usporiadaní, takže pri používaní nie je žiadny problém auto pre okraje a očakáva, že sa bude sústrediť práve tak.

To porazí pôvodný účel použitia niečoho podobného plavák. z toho dôvodu auto bude mať v týchto prvkoch hodnotu 0 px.

auto nebude fungovať aj na typickom prvku bloku, ak nemá šírku. Všetky príklady, ktoré som vám ukázal, majú šírky.

Šírka hodnoty auto bude mať 0px okraje. Šírka blokového prvku typicky pokrýva jeho kontajner, ak je auto alebo 100% a teda aj marža auto bude vypočítané na 0px v takom prípade.

Čo sa stane s vertikálnymi okrajmi s hodnotou auto?

auto v oboch horných a dolných okrajoch je vždy vypočítaný na 0px (s výnimkou absolútnych prvkov). Špecifikácia W3C hovorí takto:

“ak “margin-top” alebo “margin-bottom” je “auto”, ich použitá hodnota je 0 "

Prečo, aj tak ďaleko, je to tajomstvo. Môže to byť kvôli typickému vertikálnemu toku stránky, kde veľkosť stránky sa zvyšuje na výšku. Takže centrovanie prvku vertikálne vo svojom kontajneri nebude znamenať, že sa zdá byť centrovaný vzhľadom na samotnú stránku, na rozdiel od toho, kedy sa vykonáva horizontálne (vo väčšine prípadov).

A možno z toho istého dôvodu sa rozhodli pridať výnimku pre absolútne prvky, ktoré môžu byť vertikálne centrované po celej výške stránky.

Mohlo by to tiež byť dôsledkom efektu kolapsu okraja (zrútenie priľahlých prvkov” marže), čo je ďalšia výnimka pre vertikálne rozpätia.

Zdá sa však, že tento prípad je nepravdepodobný - pretože prvky, ktoré nezhŕňajú svoje okraje - ako napríklad plaváky a prvky s pretekať iný ako viditeľný, stále priraďujte 0px vertikálne okraje pre auto.

Centrovanie absolútne umiestnených prvkov

Pretože sa vyskytuje výnimka pre absolútne umiestnené prvky, my”bude používať auto hodnotu do stredu jeden vertikálne a horizontálne. Ale predtým, musíme zistiť, kedy bude margin: auto skutočne pracujeme, ako to chceme, v absolútne umiestnenom prvku.

Toto je miesto, kde prichádza ďalšia špecifikácia W3C:

"Ak všetky tri “ľavý”, “šírka”, a “správny” sú “auto”: Najprv nastavte akékoľvek “auto” hodnoty pre “margin-left” a “margin-right” na 0 ... "

"Ak nie je žiadny z troch “auto”: Ak oboje “margin-left” a “margin-right” sú “auto”, vyriešiť rovnicu pod dodatočným obmedzením, že oba okraje majú rovnaké hodnoty "

To skoro hovorí, že pre horizontálne auto okraje zaistiť rovnaké priestory, hodnoty pre ľavý, šírka a správny by nemal byť auto , ich predvolenú hodnotu. Takže všetko, čo musíme urobiť, je dať im nejakú hodnotu v absolútne umiestnenom prvku. ľavý a správny by mal mať rovnaké hodnoty pre dokonalé centrovanie.

Špecifikácia tiež uvádza niečo podobné pre vertikálne okraje.

“Ak sú všetky tri “top”, “výška”, a “dno” sú nastavené automaticky “top” do statickej polohy ... ”

“Ak nie je žiadny z troch “auto”: Ak oboje “margin-top” a “margin-bottom” sú “auto”, vyriešiť rovnicu pod zvláštnym obmedzením, že oba okraje majú rovnaké hodnoty ... ”

Preto je absolútny prvok vertikálne, jeho top, výška, a dno hodnoty by nemali byť auto.

Teraz tým, že sme všetko zjednotili, to sme my”dostanete:

záver

Ak ste niekedy chceli prepláchnuť prvok na vašej strane doprava alebo doľava bez toho, aby sa obalili nasledujúce prvky (ako napríklad float), nezabudnite, že máte možnosť použiť auto pre okraje.

Prevod prvku na absolútne, aby sa mohol nachádzať vertikálne, nemusí byť skvelý nápad. Existujú aj ďalšie možnosti, ako je flexbox a CSS transformácia, ktoré sú pre nich vhodné.