CSS - marginauto; - Kuinka se toimii

käyttämällä margin: auto lohkoelementin keskittäminen vaakasuoraan on tunnettu tekniikka. Mutta oletko koskaan miettinyt, miksi tai miten se toimii? Vastatakseen tähän meidän on ensin tarkasteltava, miten marginaali: auto toimii. Myös sekoitus on mitä auto voi tehdä marginaaleissa, jos se toimii pystysuunnassa ja muutama muu ongelma.

Mutta ensin, Mikä tekee auto itse asiassa?

Määritelmä auto vaihtelee elementtejä, elementtityypit ja konteksti. Marginaalit, auto voi tarkoittaa yhtä kahdesta asiasta: ota käytettävissä oleva tila tai 0 px. Nämä kaksi tahtoa määritellä elementin eri asettelut.

"auto" Käytettävissä olevan tilan ottaminen käyttöön

Tämä on yleisin marginaalin käyttö auto törmme usein. Määrittämällä auto elementin vasempaan ja oikeaan reunaan, ne vievät käytettävissä olevan vaakasuoran tilan elementin säiliössä tasaisesti - ja näin elementti keskitetään.

Tämä toimii kuitenkin vain horisontaalisilla marginaaleilla (enemmän miksi myöhemmin), ja myös ei toimi kelluvan kanssa ja inline-elementtejä ja sinänsä ei voi toimia sisään absoluuttinen ja kiinteät asennetut elementit (näemme kuitenkin, miten nämä työt tehdään).

Faux Float ottamalla käyttöön tilaa

Siitä asti kun auto sekä oikeassa että vasemmassa reunassa vievät "käytettävissä olevan" tilan yhtä hyvin, mitä luulet tapahtuvan, kun arvo auto annetaan vain yhdelle niistä?

Vasen tai oikea marginaali auto vie kaiken "käytettävissä olevan" tilan, jolloin elementti näyttää olevan huuhdeltu oikealle tai vasemmalle.

“auto” Laskettu arvoon 0px

Kuten aiemmin mainittu, auto ei toimi kelluvassa, inline- ja absoluuttisessa elementissä. Kaikilla näillä elementeillä on jo päätti niiden asetteluista, joten ei ole käyttöä auto marginaaleista ja odottaa sen olevan keskitetty juuri näin.

Se voittaa alkuperäisen tarkoituksen käyttää jotain sellaista kellua. Siten auto Näiden elementtien arvo on 0px.

auto ei myöskään toimi tyypillisellä lohkoelementillä, jos se ei ole leveä. Kaikki esimerkit, joita minä näytin sinulle, ovat leveitä.

Arvon leveys auto tulee olemaan 0px marginaalit. Lohkoelementin leveys kattaa tyypillisesti sen säiliön, kun se on auto tai 100% ja siten marginaali auto lasketaan 0px siinä tapauksessa.

Mitä tapahtuu vertikaalisten marginaalien kanssa, joilla on arvo auto?

auto sekä ylä- että alareunassa lasketaan aina 0px (paitsi absoluuttisia elementtejä). W3C-spec kertoo näin:

“Jos “margin-top” tai “margin-bottom” on “auto”, niiden käytetty arvo on 0 "

Miksi, hyvin se on toistaiseksi, mysteeri. Se voi johtua tyypillisestä pystysuorasta sivuvirrasta, missä sivun koko kasvaa korkeudella. Elementin keskittäminen vertikaalisesti säiliöön ei tee sitä näyttämään keskeltä, itse sivun suhteen, toisin kuin se tehdään horisontaalisesti (useimmissa tapauksissa).

Ja ehkä se johtuu tästä samasta syystä, he päättivät lisätä poikkeuksen absoluuttisista elementeistä, jotka voidaan keskittää pystysuoraan koko sivun korkeudelle.

Se voi johtua myös marginaalin romahtamisvaikutuksesta (viereisten elementtien romahtaminen)” marginaalit), joka on toinen poikkeus vertikaalisia marginaaleja.

Jälkimmäinen näyttää kuitenkin olevan epätodennäköinen tapaus - koska elementit, jotka eivät romahtaa niiden marginaaleja, kuten Floats ja elementit, joissa on ylivuoto muu kuin näkyvä, määritä edelleen 0px pystysuora marginaali auto.

Keskittyminen täysin sijoitettuihin elementteihin

Koska sattuu olemaan poikkeus täysin sijoitetuista elementeistä, me”Käytän auto arvo keskelle yksi pystysuoraan ja vaakasuoraan. Mutta ennen sitä meidän on selvitettävä, milloin margin: auto todella toimi kuten haluamme sen täysin sijoitetussa elementissä.

Tässä on toinen W3C-spec:

"Jos kaikki kolme “vasen”, “leveys”, ja “oikea” olemme “auto”: Aseta ensin “auto” arvot “margin-left” ja “margin-right” 0… "

"Jos mikään kolmesta ei ole “auto”: Jos molemmat “margin-left” ja “margin-right” olemme “auto”, ratkaise yhtälö ylimääräisellä rajoituksella, jonka molemmat marginaalit saavat yhtäläiset arvot "

Se sanoo sen melko paljon vaakasuora auto marginaalit takavarikoida yhtäläiset tilat arvot vasen, leveys ja oikea ei pitäisi olla auto , niiden oletusarvo. Joten meidän on vain annettava heille jonkin verran arvoa ehdottomasti sijoitetussa elementissä. vasen ja oikea olisi pitänyt yhtäläiset arvot täydelliseen keskittämiseen.

Spesifikaaleissa mainitaan myös jotain samanlaista vertikaalisten marginaalien osalta.

“Jos kaikki kolme “ylin”, “korkeus”, ja “pohja” ovat automaattisia, asetettuja “ylin” staattiseen asentoon… ”

“Jos mikään näistä kolmesta ei ole “auto”: Jos molemmat “margin-top” ja “margin-bottom” olemme “auto”, ratkaise yhtälö ylimääräisellä rajoituksella, jonka molemmat marginaalit saavat yhtäläiset arvot… ”

Näin ollen absoluuttinen elementti on keskitetty pystysuoraan, sen ylin, korkeus, ja pohja arvojen ei pitäisi olla auto.

Nyt yhdistämällä kaikki nämä tämä on se, mitä me”Saat:

johtopäätös

Jos haluat koskaan huuhdella sivun elementin oikealle tai vasemmalle ilman seuraavia elementtejä (kuten whats tapahtuu floatilla), muista, että on mahdollista käyttää auto marginaalit.

Elementin muuttaminen absoluuttiseksi, joten se voidaan keskittää pystysuoraan, ei ehkä ole hyvä idea. On muitakin vaihtoehtoja, kuten flexbox ja CSS muunnos, jotka sopivat paremmin niille.