CSS - marginauto; - Hvordan det virker
Ved brug af margin: auto at centrere et blokelement vandret er en velkendt teknik. Men har du nogensinde spekuleret på hvorfor eller hvordan det virker? For at besvare dette skal vi først se på, hvor meget: auto fungerer. Også i blandingen er hvad auto Kan muligvis gøre i margener, hvis det virker for vertikal centrering og et par andre problemer.
Men først, hvad gør auto faktisk gør?
Definitionen af auto varierer med elementer, elementtyper og sammenhæng. I margener, auto kan betyde en af to ting: optag det ledige rum eller 0 px. Disse to vil Definer forskellige layouts for et element.
"auto" optager ledig plads
Dette er den mest almindelige brug af margen auto vi støder ofte på. Ved tildeling auto Til venstre og højre kant af et element optager de det ledige vandrette rum i elementets beholder lige - og dermed bliver elementet centreret.
Dette vil dog kun fungere for horisontale margener (mere på hvorfor senere), og det også vil ikke fungere med floated og inline elementer og i sig selv også det kan ikke fungere i absolut og faste positionerede elementer (vi vil dog se, hvordan man laver disse arbejde).
Faux Float ved at optage ledigt plads
Siden auto i både højre og venstre margen optager det "tilgængelige" rum lige, hvad tror du vil ske, når værdien auto er givet til kun en af dem?
En venstre eller højre margen med auto vil tage op i alle de "ledige" rum, der gør elementet til at ligne, at det er blevet skyllet til højre eller venstre.
“auto” Beregnet til 0px
Som nævnt før, auto vil ikke fungere i floated, inline og absolutte elementer. Alle disse elementer har allerede besluttet på deres layout, så der ikke er brug for at bruge auto for margenerne og forventer, at den bliver centreret netop sådan.
Det vil besejre det oprindelige formål med at bruge noget som flyde. Derfor auto vil have en værdi på 0px i disse elementer.
auto vil heller ikke fungere på et typisk blokelement, hvis det ikke har en bredde. Alle de eksempler jeg viste dig indtil videre har bredder.
En bredde af værdi auto vil have 0px marginer. Et blokelements bredde dækker typisk sin beholder, når den er auto eller 100% og dermed en margen auto vil blive beregnet til 0px i et sådant tilfælde.
Hvad sker der med lodrette margener med værdien auto?
auto i både øverste og nederste margen beregnes altid til 0px (undtagen absolutte elementer). W3C spec siger det sådan:
“Hvis “margin-top” eller “margin-bottom” er “auto”, deres anvendte værdi er 0 "
Hvorfor, det er så langt et mysterium. Det kunne være på grund af den typiske vertikale sidestrøm, hvor sidestørrelse øges højdevis. Så centrering af et element lodret i sin beholder, vil ikke få det til at fremstå centreret i forhold til selve siden, i modsætning til når det er gjort horisontalt (i de fleste tilfælde).
Og måske er det på grund af samme grund, at de besluttede at tilføje en undtagelse for absolutte elementer, der kan centreres lodret langs hele sides højde.
Det kan også være på grund af marginal sammenbrudseffekten (et sammenbrud af tilstødende elementer” margener), hvilket er en anden undtagelse for de vertikale margener.
Sidstnævnte synes dog at være et usandsynligt tilfælde - da elementer, der ikke kollapser deres margener - som Floats, og elementer med flyde over andet end synlig, Tildeles stadig 0px lodrette margener for auto.
Centrering af absolut positionerede elementer
Da der tilfældigvis er en undtagelse for absolut positionerede elementer, vi”vil bruge auto værdi til at centrere en lodret og vandret. Men før det skal vi finde ud af, hvornår det vil margin: auto faktisk arbejde som vi ønsker det i et absolut positioneret element.
Her kommer en anden W3C spec:
"Hvis alle tre af “venstre”, “bredde”, og “ret” er “auto”: Indstil først nogen “auto” værdier for “margin-left” og “margin-ret” til 0 ... "
"Hvis ingen af de tre er “auto”: Hvis begge “margin-left” og “margin-ret” er “auto”, løse ligningen under den ekstra begrænsning, at de to margener får ens værdier "
Det siger stort set det til vandret auto marginer at gribe lige mellemrum, den værdier for venstre, bredde og ret bør ikke være auto , deres standardværdi. Så alt, hvad vi skal gøre, er at give dem en vis værdi i et absolut positioneret element. venstre og ret skulle have lige værdier for perfekt centrering.
Specen nævner også noget, der ligner lodrette margener.
“Hvis alle tre af “top”, “højde”, og “bund” er auto, indstillet “top” til den statiske position ... ”
“Hvis ingen af de tre er “auto”: Hvis begge “margin-top” og “margin-bottom” er “auto”, Løs ligningen under den ekstra begrænsning, at de to margener får lige værdier ... ”
Derfor for et absolut element at være centreret lodret, dens top, højde, og bund værdier bør ikke være auto.
Nu ved at kombinere alle disse, er det hvad vi”får du:
Konklusion
Hvis du nogensinde vil skylle et element på din side til højre eller venstre, uden at følgende elementer indpakker det (som hvad sker der med float), husk, at der er mulighed for at bruge auto for margener.
Konvertere et element til absolut bare så det kan centreres lodret, er måske ikke en god ide. Der er andre muligheder som flexbox og CSS transform, som er mere egnede til dem.
