CSS - marginauto; - Jak to funguje

Použitím okraj: auto pro horizontální vycentrování prvku bloku je dobře známá technika. Přemýšleli jste někdy, proč nebo jak to funguje? Abychom na to mohli odpovědět, musíme se nejprve podívat, jak marže: auto funguje. Také ve směsi je to, co auto může dělat v okrajích, pokud to funguje pro vertikální centrování, a několik dalších problémů.

Ale nejdřív, co dělá auto vlastně dělají?

Definice auto se liší Prvky, typy prvků a kontext. V okrajích, auto může znamenat jednu ze dvou věcí: zabírat dostupný prostor nebo 0 px. Tyto dvě vůle definovat různé rozvržení prvku.

"auto" Užívání volného místa

Toto je nejběžnější použití marže auto často se setkáváme. Přiřazením auto na levý a pravý okraj prvku zabírají vodorovný prostor v kontejneru elementu stejně - a tím se prvek vycentruje.

To však bude fungovat pouze pro horizontální okraje (více na proč později) a také nebude fungovat s floated a vložené prvky a sám o sobě nemůže fungovat v absolutní a pevné prvky (ale uvidíme, jak tyto práce dělat).

Faux Float Tím, že se k dispozici prostor

Od té doby auto jak v pravém, tak v levém okraji zaujměte „dostupné“ místo stejně, co si myslíte, že se stane, když hodnota auto je dána pouze jednomu z nich?

Levý nebo pravý okraj s auto bude zabírat celý "dostupný" prostor, takže prvek bude vypadat tak, jako by byl spláchnut vpravo nebo vlevo.

“auto” Vypočteno na 0px

Jak bylo zmíněno, auto nebude fungovat v plovoucí, inline a absolutních prvcích. Všechny tyto prvky již mají rozhodl o jejich uspořádání, takže se nepoužívá auto pro okraje a očekávat, že se dostane takhle.

To porazí počáteční účel použití něčeho takového plovák. Proto auto bude mít v těchto prvcích hodnotu 0px.

auto Nebude také fungovat na typickém elementu bloku, pokud nemá šířku. Všechny příklady, které jsem vám ukázal, mají šířky.

Šířka hodnoty auto budu mít 0px marže. Šířka prvku bloku obvykle pokrývá jeho kontejner, když je auto nebo 100% a tedy i marže auto bude vypočítán 0px v takovém případě.

Co se stane s vertikální okraje s hodnotou auto?

auto v horním i dolním okraji se vždy počítá na 0px (s výjimkou absolutních prvků). W3C spec to říká takto:

“Li “horní okraj” nebo “spodní okraj” je “auto”, jejich hodnota je 0 "

Proč, to je zatím tak tajemství. Může to být způsobeno typickým vertikálním tokem stránky, kde velikost stránky se zvyšuje výškově. Takže centrování elementu vertikálně v jeho kontejneru nezpůsobí, že se bude nacházet na středu vzhledem k samotné stránce, na rozdíl od toho, když se provádí horizontálně (ve většině případů).

A možná je to z tohoto důvodu, rozhodli se přidat výjimku pro absolutní prvky, které mohou být vycentrovány vertikálně podél celé stránky..

Mohlo by to být také z důvodu kolapsu okrajů (zhroucení sousedních prvků)” marže), což je další výjimka pro vertikální marže.

Zdá se však, že se jedná o nepravděpodobný případ - protože prvky, které nekolabují své okraje - jako jsou plováky a prvky s přetečení jiný než viditelné, stále přiřadit 0px vertikální okraje pro auto.

Vycentrování absolutně umístěných prvků

Protože se jedná o výjimku pro absolutně umístěné prvky, my”použití auto hodnotu na středovou a vodorovnou. Ale předtím musíme zjistit, kdy bude okraj: auto ve skutečnosti fungují tak, jak chceme, aby to bylo v absolutně umístěném prvku.

Zde přichází další specifikace W3C:

"Pokud všichni tři “vlevo, odjet”, “šířka”, a “že jo” jsou “auto”Nejdříve nastavte “auto” hodnoty pro “okraj vlevo” a “pravý okraj” do 0… "

"Pokud žádný z nich není." “auto”: Pokud oba “okraj vlevo” a “pravý okraj” jsou “auto”, řešit rovnici pod extra podmínkou, že obě okraje získají stejné hodnoty "

To do značné míry říká horizontální auto marže chytit stejné prostory, hodnoty pro vlevo, odjet, šířka a že jo neměla by být auto , výchozí hodnotu. Jediné, co musíme udělat, je dát jim nějakou hodnotu v absolutně umístěném prvku. vlevo, odjet a že jo měl by mít stejné hodnoty pro dokonalé centrování.

Specifikace také zmiňuje něco podobného pro vertikální okraje.

“Pokud všechny tři “horní”, “výška”, a “dno” jsou automatické, nastavené “horní” do statické polohy… ”

“Pokud žádný z těchto tří není “auto”: Pokud oba “horní okraj” a “spodní okraj” jsou “auto”, řešit rovnici pod extra podmínkou, že obě okraje získají stejné hodnoty… ”

Proto pro absolutní prvek, který má být ve svislém směru, to je horní, výška, a dno hodnoty by neměly být auto.

Tím, že spojíme všechny tyto, to je to, co my”Dostanu:

Závěr

Pokud byste někdy chtěli propustit prvek na stránce vpravo nebo vlevo bez následujících prvků, které jej zabalují (jako to, co se děje s floatem), nezapomeňte, že je možnost použít auto pro marže.

Konverze elementu na absolutní tak, aby mohl být vycentrován svisle, nemusí být skvělý nápad. Existují i ​​další možnosti, jako je flexbox a CSS transformace, které jsou pro ně vhodnější.