CSS - marginauto; - Hvordan det fungerer

Ved hjelp av margin: auto å sentrere et blokkelement horisontalt er en velkjent teknikk. Men har du noen gang lurt på hvorfor eller hvordan det fungerer? For å svare på dette må vi først se på hvilken margin: automatisk fungerer. Også i blandingen er hva auto kan muligens gjøre i marginer, hvis det virker for vertikal sentrering, og noen andre problemer.

Men først, hva gjør auto faktisk gjør?

Definisjonen av auto varierer med elementer, elementtyper og kontekst. I marginer, auto kan bety en av to ting: Ta opp ledig plass eller 0 px. Disse to vil definer forskjellige layouter for et element.

"auto" tar opp ledig plass

Dette er den vanligste bruken av margin auto vi kommer ofte over. Ved å tildele auto til venstre og høyre kant av et element, tar de det tilgjengelige horisontale rommet i elementets beholder like - og dermed blir elementet sentrert.

Dette vil imidlertid kun fungere for horisontale marginer (mer på Hvorfor senere), og det også vil ikke fungere med flytende og inline elementer og i seg selv, det også kan ikke fungere i absolutte og faste posisjonerte elementer (vi vil imidlertid se hvordan de skal få dem til å fungere).

Faux Float ved å ta opp ledig plass

Siden auto i både høyre og venstre marginer tar opp "tilgjengelig" plass like, hva tror du vil skje når verdien auto Gis bare en av disse?

En venstre eller høyre margin med auto vil ta opp alle "tilgjengelige" mellomrom slik at elementet ser ut som det har blitt skyllet til høyre eller venstre.

“auto” Beregnet til 0px

Som nevnt tidligere, auto vil ikke fungere i flytende, inline og absolutte elementer. Alle disse elementene har allerede bestemte seg for deres oppsett, så det er ingen bruk i bruk auto for marginene og forventer at det blir sentrert akkurat slik.

Det vil beseire det opprinnelige formålet med å bruke noe som flyte. derav auto vil ha en verdi på 0px i disse elementene.

auto vil heller ikke fungere på et typisk blokkelement hvis det ikke har en bredde. Alle eksemplene jeg viste deg så langt har bredder.

En bredde av verdi auto vil ha 0px marginer. Et blokkelements bredde dekker vanligvis beholderen sin når den er auto eller 100% og dermed en margin auto vil bli beregnet til 0px i et slikt tilfelle.

Hva skjer med vertikale marginer med verdien auto?

auto i både øverste og nederste marginer beregnes alltid til 0px (unntatt absolutt element). W3C spec sier det slik:

“Hvis “margin-top” eller “margin-bottom” er “auto”, deres brukte verdi er 0 "

Hvorfor, vel det er så langt, et mysterium. Det kan være på grunn av den typiske vertikale sidestrømmen, hvor sidestørrelsen øker høydevis. Så, sentrering av et element vertikalt i sin beholder, kommer ikke til å gjøre det virke sentrert, i forhold til selve siden, i motsetning til når det er gjort horisontalt (i de fleste tilfeller).

Og kanskje det er på grunn av samme grunn, bestemte de seg for å legge til et unntak for absolutte elementer som kan senteres vertikalt langs hele sidens høyde.

Det kan også være på grunn av marginkollaps-effekten (et sammenbrudd av tilstøtende elementer” marginer) som er et annet unntak for vertikale marginer.

Men sistnevnte synes å være et lite sannsynlig tilfelle - siden elementer som ikke kollapser sine marginer - som Floats, og elementer med flyte annet enn synlig, Tildeles fortsatt 0px vertikale marginer for auto.

Sentrering av helt posisjonerte elementer

Siden det er et unntak for absolutt posisjonerte elementer, vi”vil bruke auto verdien til å sitte i midten vertikalt og horisontalt. Men før det må vi finne ut når det vil margin: auto faktisk fungerer som vi vil ha det i et helt posisjonert element.

Dette er hvor en annen W3C-spesifikasjon kommer inn:

"Hvis alle tre av “venstre”, “bredde”, og “Ikke sant” er “auto”: Først sett noen “auto” verdier for “margin-left” og “margin-right” til 0 ... "

"Hvis ingen av de tre er “auto”: Hvis begge deler “margin-left” og “margin-right” er “auto”, løse ligningen under den ekstra begrensningen at de to margenene får likeverdier "

Det sier ganske mye det for horisontal auto marginer å gripe like mellomrom, verdier for venstre, bredde og Ikke sant bør ikke være auto , standardverdien. Så alt vi trenger å gjøre er å gi dem litt verdi i et helt posisjonert element. venstre og Ikke sant burde likeverdige verdier for perfekt sentrering.

Spesifikasjonen nevner også noe som ligner på vertikale marginer.

“Hvis alle tre av “topp”, “høyde”, og “bunn” er auto, sett “topp” til den statiske posisjonen ... ”

“Hvis ingen av de tre er “auto”: Hvis begge deler “margin-top” og “margin-bottom” er “auto”, løse ligningen under den ekstra begrensningen at de to margenene får likeverdige verdier ... ”

Derfor, for et absolutt element å være sentrert vertikalt, det er topp, høyde, og bunn verdier bør ikke være auto.

Nå ved å kombinere alle disse, er dette hva vi”får du:

Konklusjon

Hvis du noen gang vil spyle et element på siden din til høyre eller venstre uten at følgende elementer innpakker det (som hva skjer med float), husk at det er mulighet til å bruke auto for marginer.

Konvertere et element til absolutt bare slik at det kan være sentrert vertikalt, kan ikke være en god ide. Det finnes andre alternativer som flexbox og CSS transform som er mer egnet for dem.