CSS - marginauto; - Kako deluje

Uporaba margin: auto središče blokovnega elementa vodoravno je dobro znana tehnika. Ali ste se kdaj vprašali, zakaj ali kako deluje? Da bi odgovorili na to, moramo najprej pogledati, kako rob: auto deluje. Tudi v mešanici je kaj samodejno lahko naredite na robovih, če deluje za vertikalno centriranje, in še nekaj drugih vprašanj.

Ampak najprej, kaj počne samodejno dejansko?

Opredelitev. \ T samodejno spreminja elementov, vrste elementov in kontekstu. Na robovih, samodejno lahko pomeni eno od dveh stvari: zavzeti prostor, ki je na voljo, ali 0 px. Ta dva bosta določite različne postavitve za element.

"auto" Prevzem razpoložljivega prostora

To je najpogostejša uporaba marže samodejno pogosto naletimo. Z dodeljevanjem samodejno na levi in ​​desni rob elementa enakomerno zavzamejo razpoložljivi horizontalni prostor v vsebniku elementa - in tako element postane centriran.

Vendar pa bo to delovalo samo za horizontalne robove (več na zakaj kasneje) in tudi ne bo delovalo s plutanjem in elementov in sam po sebi tudi ne more delovati v absolutno in fiksno nameščeni elementi (vendar bomo videli, kako narediti ta dela).

Faux Float Z prevzemom razpoložljivega prostora

Od samodejno v desnem in levem robu enako zavzamejo "razpoložljivi" prostor, kaj se bo zgodilo, ko bo vrednost samodejno samo enemu od teh?

Levi ali desni rob z samodejno bo zavzel ves "razpoložljiv" prostor, tako da bo element videti, kot da je bil izpuščen desno ali levo.

“samodejno” Izračunano na 0px

Kot že omenjeno, samodejno ne bo deloval v floated, inline in absolutnih elementih. Vsi ti elementi že imajo odločili o njihovih postavitvah, zato ni mogoče uporabiti samodejno za marže in pričakujem, da se bo tako osredotočila.

To bo premagalo prvotni namen uporabe podobnega float. Zato samodejno v teh elementih bo imela vrednost 0px.

samodejno Prav tako ne bo deloval na tipičnem elementu bloka, če nima širine. Vsi primeri, ki sem jih do sedaj pokazal, imajo širino.

Širina vrednosti samodejno bo imel 0px marže. Širina elementa bloka običajno pokriva vsebnik, ko je samodejno ali 100% in s tem razliko samodejno bo izračunano na 0px v takem primeru.

Kaj se zgodi z navpičnimi robovi z vrednostjo samodejno?

samodejno v zgornji in spodnji margini se vedno izračuna na 0px (razen absolutnih elementov). Specifikacija W3C pravi:

“Če “margin-top” ali “margin-bottom” je “samodejno”, njihova uporabljena vrednost je 0 "

Zakaj, no, to je daleč, skrivnost. To je lahko posledica tipičnega navpičnega toka strani, kjer velikost strani se poveča glede na višino. Torej, centriranje elementa navpično v njegovem vsebniku ne bo naredilo, da bo videti v sredini, glede na samo stran, za razliko od tega, ko je opravljeno vodoravno (v večini primerov).

Mogoče so se zaradi tega razloga odločili, da dodajo izjemo za absolutne elemente, ki se lahko centrirajo navpično vzdolž celotne višine strani..

To bi lahko bilo tudi zaradi učinka padca robov (kolaps sosednjih elementov” marže), kar je še ena izjema za navpične robove.

Vendar se zdi, da je slednji malo verjeten primer - ker elementi, ki ne zrušijo svojih robov - kot so Floats, in elementi z prelivanje razen vidno, še vedno določite 0px navpičnih robov za samodejno.

Centriranje absolutno pozicioniranih elementov

Ker obstaja izjema za absolutno postavljene elemente, mi”bom uporabil samodejno vrednost centrirajte eno navpično in vodoravno. Toda pred tem moramo ugotoviti, kdaj bo margin: auto dejansko deluje tako, kot si želimo v absolutno postavljenem elementu.

Tukaj prihaja druga specifikacija W3C:

"Če bi vsi trije." “levo”, “premer”, in “prav” so “samodejno”: Najprej nastavite poljubno “samodejno” vrednosti za “rob-levo” in “margin-right” do 0… "

"Če nobeden od treh ni." “samodejno”: Če oboje “rob-levo” in “margin-right” so “samodejno”, rešiti enačbo pod dodatno omejitvijo, da sta dve marži enaki vrednosti "

To večinoma pravi to vodoravno samodejno marže izkoristiti enake prostore,. \ t vrednosti za levo, premer in prav ne bi smelo biti samodejno , privzeto vrednost. Vse kar moramo storiti je, da jim damo nekaj vrednosti v absolutno postavljenem elementu. levo in prav bi moral enake vrednosti za popolno centriranje.

Specifikacija omenja tudi nekaj podobnega za navpične robove.

“Če so vsi trije “na vrh”, “višine”, in “spodaj” so samodejni, nastavljeni “na vrh” v statični položaj ... ”

“Če nobeden od treh ni “samodejno”: Če oboje “margin-top” in “margin-bottom” so “samodejno”, rešiti enačbo pod dodatno omejitvijo, da obe margini dobita enake vrednosti ... ”

Zato mora biti absolutni element sredinsko navpično, svoje na vrh, višine, in spodaj vrednosti ne bi smele biti samodejno.

Zdaj, ko združimo vse to, je to tisto, kar mi”bom dobil:

Zaključek

Če želite kadar koli izprazniti element na vaši strani na desno ali levo, ne da bi ga vsebovali naslednji elementi (kot se dogaja s float), ne pozabite, da obstaja možnost za uporabo samodejno za marže.

Pretvarjanje elementa v absolutno tako, da ga lahko centriramo navpično, morda ni odlična ideja. Obstajajo še druge možnosti, kot so flexbox in CSS transformacija, ki so primernejše za te.