CSS - marginauto; - Cum functioneaza

Utilizarea margin: auto pentru a centra un element de bloc orizontal este o tehnică bine cunoscută. Dar v-ați întrebat vreodată de ce sau cum funcționează? Pentru a răspunde la aceasta, trebuie mai întâi să aruncăm o privire la modul în care funcționează automat: De asemenea, în amestec este ceea ce auto poate face în margini, dacă funcționează pentru centrarea verticală și câteva alte probleme.

Dar mai intai, ce face auto de fapt?

Definiția auto variază cu element, elemente de elemente și context. În margini, auto poate însemna unul din două lucruri: ocupați spațiul disponibil sau 0 px. Aceste două vor definiți structuri diferite pentru un element.

"auto" preluarea spațiului disponibil

Aceasta este cea mai obișnuită utilizare a marjei auto ne întâlnim de multe ori. Prin alocare auto la marginea stângă și dreaptă a unui element, aceștia preia spațiul orizontal disponibil în containerul elementului în mod egal - și astfel elementul devine centrat.

Cu toate acestea, aceasta va funcționa doar pentru marjele orizontale (mai mult pe De ce mai târziu), și de asemenea nu va funcționa cu plutitor și elemente inline și prin ea însăși, și ea nu poate funcționa în absolut și elemente fixe fixate (vom vedea totuși cum să-i facem pe aceștia să lucreze).

Faux Float prin preluarea spațiului disponibil

De cand auto atât în ​​marginea dreaptă cât și în cea din stânga ocupă spațiul "disponibil" în mod egal, ceea ce credeți că se va întâmpla atunci când valoarea auto este acordat doar unuia dintre aceștia?

O margine stanga sau dreapta cu auto va ocupa tot spatiul "disponibil", ceea ce face ca elementul sa arate ca a fost spalat dreapta sau stanga.

“auto” Compusă la 0 px

Așa cum sa menționat mai înainte, auto nu vor funcționa în elemente plutitoare, inline și absolute. Toate aceste elemente au deja au hotărât asupra aspectului lor, astfel încât nu există nici o utilizare în utilizarea auto pentru marjele și așteptându-i să se centreze așa.

Acest lucru va învinge scopul inițial de a folosi ceva de genul pluti. prin urmare auto va avea o valoare de 0px în aceste elemente.

auto nu va funcționa, de asemenea, pe un element tipic de bloc dacă nu are o lățime. Toate exemplele pe care le-am arătat până acum au lățimi.

O lățime de valoare auto vom avea 0px marjele. O lățime a elementului bloc acoperă, în mod obișnuit, recipientul său atunci când este auto sau 100% și, prin urmare, o marjă auto va fi calculat la 0px in acest caz.

Ce se întâmplă cu marginile verticale cu valoarea auto?

auto în ambele margini de sus și de jos este întotdeauna calculată la 0px (cu excepția elementelor absolute). Specia W3C spune așa:

“Dacă “margin-top” sau “margin-bottom” este “auto”, valoarea lor utilizată este 0 "

De ce, până acum, este un mister. Ar putea fi din cauza fluxului tipic al paginii verticale, unde dimensiunea paginii crește înălțime. Deci, centrarea unui element pe verticală în containerul său nu va face să pară centrat, relativ la pagina însăși, spre deosebire de momentul în care se face orizontal (în majoritatea cazurilor).

Și poate din acest motiv au decis să adauge o excepție pentru elementele absolute care pot fi centrate vertical pe toată înălțimea paginii.

Ar putea fi și din cauza efectului de colaps al marjei (o colapsare a elementelor adiacente” marje), care reprezintă o altă excepție pentru marjele verticale.

Cu toate acestea, acesta din urmă pare a fi un caz improbabil - deoarece elementele care nu își prăbușesc marjele - cum ar fi plutitele și elementele cu revărsare în afară de vizibil, încă atribuiți marjele verticale de 0px pentru auto.

Centrarea elementelor poziționate în mod absolut

Deoarece se întâmplă să existe o excepție pentru elementele absolut poziționate, noi”Voi folosi auto pentru a centra unul vertical și orizontal. Dar înainte de asta, trebuie să aflăm când va fi margin: auto lucrează de fapt așa cum dorim să fie într-un element absolut poziționat.

Aici intră și un alt spec. W3C:

"Dacă toți trei “stânga”, “lăţime”, și “dreapta” sunteți “auto”: Mai întâi setați orice “auto” valori pentru “-Marginea din stânga” și “margin-dreapta” la 0 ... "

"Dacă niciuna dintre cele trei nu este “auto”: Dacă ambele “-Marginea din stânga” și “margin-dreapta” sunteți “auto”, rezolva ecuația sub constrângerea suplimentară că cele două marje obțin valori egale "

Asta spune destul de mult pentru asta orizontală auto marjele să profite de spații egale, valori pentru stânga, lăţime și dreapta nu ar trebui să fie auto , valoarea lor implicită. Deci, tot ce trebuie să facem este să le oferim o valoare într-un element absolut poziționat. stânga și dreapta ar trebui sa aiba valori egale pentru centrarea perfectă.

Specificația menționează, de asemenea, ceva similar pentru marjele verticale.

“Dacă toate trei “top”, “înălţime”, și “fund” sunt setate automat “top” la poziția statică ... ”

“Dacă niciuna dintre cele trei nu este “auto”: Dacă ambele “margin-top” și “margin-bottom” sunteți “auto”, rezolva ecuația sub constrângerea suplimentară că cele două marje obțin valori egale ... ”

Prin urmare, pentru ca un element absolut să fie centrat pe verticală, este top, înălţime, și fund valorile nu ar trebui să fie auto.

Acum combinând toate acestea, asta este ceea ce noi”voi primi:

Concluzie

Dacă doriți vreodată să ștergeți un element de pe pagina dvs. spre dreapta sau spre stânga fără ca următoarele elemente să îl înfășoare (cum ar fi ce se întâmplă cu float), amintiți-vă că există opțiunea de a utiliza auto pentru marje.

Conversia unui element la absolut doar pentru a putea fi centrat pe verticală poate să nu fie o idee grozavă. Există și alte opțiuni, cum ar fi transformarea flexbox și CSS, care sunt mai potrivite pentru acestea.