CSS - marginauto; - Hogyan működik

használata margin: auto a blokkelemet vízszintesen középpontba állítani egy jól ismert technika. De vajon valaha is azon tűnődtél, hogy miért vagy hogyan működik? Ennek megválaszolásához először meg kell vizsgálnunk, hogy a margó: az automatikus. A mixben is van mit kocsi esetleg margókban is végezhet, ha függőleges középpontosításra és néhány egyéb problémára működik.

De először, mit csinál kocsi valójában?

A kocsi változik elemek, elemtípusok és kontextus. Margókban, kocsi a két dolog egyikét jelenti: vegye fel a rendelkezésre álló helyet vagy 0 px-t. Ez a két akarat definiáljon különböző elrendezéseket egy elemhez.

"auto" Elérhető tér felvétele

Ez a leggyakoribb haszonkulcs kocsi gyakran találkozunk. A hozzárendeléssel kocsi egy elem bal és jobb margójába egyenlően veszi fel az elemtartályban lévő rendelkezésre álló vízszintes helyet - és így az elem középre kerül.

Ez azonban csak vízszintes margóknál fog működni (többet a miért később), és ez is nem fog lebegni és inline elemek és önmagában is nem működik ban ben abszolút és rögzített elhelyezett elemek (azonban látni fogjuk, hogyan lehet ezeket a munkákat elvégezni).

Faux Float a rendelkezésre álló tér felvételével

Mivel kocsi mind a jobb, mind a bal oldali margóknál egyformán felveszi a "rendelkezésre álló" helyet, mit gondol, mi történik akkor, ha az érték kocsi csak az egyiknek adják?

Bal vagy jobb margó kocsi az összes "rendelkezésre álló" helyet foglalja el, így az elem úgy néz ki, mint amennyit jobbra vagy balra öblített.

“kocsi” 0px-re számítva

Mint korábban említettük, kocsi nem fog lebegő, inline és abszolút elemekben működni. Mindezen elemek már rendelkeznek az elrendezésükről döntött, így nincs használatuk kocsi a margókért és arra számítva, hogy éppúgy középpontba kerül.

Ez legyőzi az eredeti célt, hogy valami hasonlót használjon úszó. Ennélfogva kocsi az elemekben 0px értékű lesz.

kocsi akkor sem fog működni egy tipikus blokkelemen, ha nincs szélessége. Az összes példa, amit eddig megmutattam, szélessége van.

Az érték szélessége kocsi lesz 0px margók. A blokkelem szélessége tipikusan a tartályt fedi le kocsi vagy 100% és így egy margin kocsi számításra kerül 0px ilyen esetben.

Mi történik az értékkel rendelkező függőleges margókkal? kocsi?

kocsi mind a felső, mind az alsó margóban mindig 0px-re számítanak (kivéve az abszolút elemeket). A W3C spec ezt mondja:

“Ha “margin-top” vagy “margin-bottom” jelentése “kocsi”, a használt értéke 0 "

Miért, nos, ez eddig is, rejtély. Ez lehet a tipikus függőleges oldaláramlás miatt, ahol az oldalméret növeli a magasságot. Tehát az elem függőleges elhelyezése a tartályban nem teszi azt középre, az oldalhoz viszonyítva, ellentétben azzal, ha vízszintesen történik (a legtöbb esetben).

Talán ugyanezen ok miatt is úgy döntöttek, hogy kivételt adnak az abszolút elemekhez, amelyek függőlegesen középre helyezhetők az egész oldal magassága mentén.

Az is lehet, hogy a margó összeomlási hatása miatt (a szomszédos elemek összeomlása)” a függőleges margók kivételével.

Az utóbbi azonban valószínűtlen esetnek tűnik - mivel olyan elemeket, amelyek nem összezárják a margójukat - mint pl. túlcsordulás más mint látható, még 0px függőleges margókat rendeljen hozzá kocsi.

Abszolút pozicionált elemek központosítása

Mivel előfordul, hogy kivétel van a teljesen elhelyezett elemekről, mi”Használhatom kocsi függőleges és vízszintes középpontba kerül. De ezt megelőzően meg kell találnunk, hogy mikor lesz margin: auto valójában úgy működik, mint egy teljesen elhelyezett elemben.

Ez az a hely, ahol egy másik W3C-specifikáció érkezik:

"Ha mind a három “balra”, “szélesség”, és “jobb” vannak “kocsi”: Először állítsa be “kocsi” értékek “margin-left” és “margin-right” 0-ig… "

"Ha a három közül egyik sem “kocsi”: Ha mindkettő “margin-left” és “margin-right” vannak “kocsi”, megoldja az egyenletet azon extra kényszerben, amelyet a két margó egyenlő értékre tesz

Ez nagyjából ezt mondja vízszintes kocsi margók megragadni az egyenlő tereket, a értékek balra, szélesség és jobb nem kellene kocsi , alapértelmezett értékük. Tehát mindössze annyit kell tennünk, hogy valamilyen értéket adjon nekik egy teljesen elhelyezett elemben. balra és jobb kellett volna egyenlő értékek a tökéletes központosításhoz.

A specifikáció a vertikális margókhoz hasonló dolgokat is említ.

“Ha mind a három “felső”, “magasság”, és “alsó” automatikus, beállított “felső” a statikus helyzetbe… ”

“Ha a három közül egyik sem “kocsi”: Ha mindkettő “margin-top” és “margin-bottom” vannak “kocsi”, megoldja az egyenletet azon extra kényszerben, hogy a két margó egyenlő értéket kapjon… ”

Ezért abszolút elemnek kell lennie függőlegesen, annak felső, magasság, és alsó értékek nem lehetnek kocsi.

Most mindezeket egyesítve ez az, amit mi”Kapok:

Következtetés

Ha valaha is szeretné az oldal elemeit jobbra vagy balra öblíteni anélkül, hogy a következő elemeket csomagolná (mint például az úszóval történik), ne feledje, hogy van lehetőség arra kocsi margók esetében.

Az elem átalakítása abszolút csak úgy, hogy függőlegesen központosítható legyen, nem lehet jó ötlet. Vannak más lehetőségek, mint például a flexbox és a CSS átalakítás, amelyek jobban megfelelnek ezeknek.