Centrarea în CSS: Un ghid complet
Elementele de centrare reprezintă cel mai popular motiv pentru plângerile legate de CSS. "De ce nu ar fi mai simplu?" - Toată lumea este indignată de faptul că nu este leneș. Cred că problema nu este că este dificil de făcut, dar că metodele de centrare a elementelor sunt atât de multe încât este dificil să alegeți cel corect.
Să construim o schemă bazată pe arbori pentru a lua o decizie și să sperăm că acest lucru va simplifica puțin lucrurile.
Centrare orizontală
Elementele liniei (texte, link-uri) cu tipul de afișare inline. inline-block. inline-masă. Inline-flex. în interiorul blocului părinte poate fi centrat astfel:
Elementul de bloc poate fi centrat prin setarea valorii auto pentru marginea stângă și marginea dreaptă (și, de asemenea, stabilirea unei lățimi specifice pentru aceasta, altfel va ocupa întreaga lățime a containerului părinte și nu va trebui centrat). Pentru aceasta, este adesea folosit un record scurt:
Metoda funcționează indiferent de lățimea elementului de bloc centrat și a părintelui său. Rețineți că nu puteți forța elementul să plutească în centru folosind float.
Elemente multiple de bloc. plasate într-un rând. care trebuie centrate orizontal. Este posibil să trebuiască să modificați tipul de afișare. Trebuie să specificați tipul de cartografiere în linie pentru ei sau să aplicați flexbox:
În același caz, dacă aveți mai multe elemente de bloc amplasate una peste alta, va funcționa perfect cu indentări automate.
Centrarea verticală
Cu centrarea verticală în CSS, totul este puțin mai complicat:
Un element rând este plasat într-o singură linie:
Uneori, elementele de linie / text pot să pară centrate vertical numai pentru că au aceleași margini superioare și inferioare (umplutură).
Dacă folosirea câmpurilor este imposibilă dintr-un anumit motiv și doriți să centrați textul care nu va fi transferat exact la linia următoare, puteți utiliza trucul cu înălțimea liniei de setare egală cu înălțimea elementului, astfel încât să se centreze textul:
Centrarea mai multor rânduri de text poate fi făcută prin setarea acelorași câmpuri superioare și inferioare, dar dacă această opțiune nu funcționează, puteți face elementul în care este plasat textul, celula tabelului - literal sau pur și simplu imitând-o în CSS. Pentru centrare, proprietatea vertical-align este în acest caz. În ciuda faptului că de obicei doar aliniază elementele orizontale din rând.
Dacă apare o tabelă de imitație, merită să utilizați flexbox. Un element flexibil pentru copii poate fi ușor centrat în părintele flexibil.
Amintiți-vă că această metodă este potrivită numai dacă recipientul părinte are o anumită lățime (px,%, etc.), deci aici containerul are o înălțime.
Dacă ambele metode nu funcționează, puteți utiliza metoda "element fantomă", în care un pseudo-element cu înălțimea maximă este plasat în container și textul este aliniat orizontal la acest element:
Element de blocare cu înălțime fixă.
De obicei, atunci când vine vorba de o pagină web, înălțimea poate să nu fie cunoscută din mai multe motive: dacă lățimea elementelor se schimbă, redistribuirea textului poate schimba înălțimea. Variațiile în stilul textului pot schimba înălțimea. Modificarea cantității de text poate schimba înălțimea elementului. Articolele cu un raport de aspect fix, cum ar fi imaginile, pot schimba înălțimea atunci când scalarea și așa mai departe.
Dar, dacă cunoașteți înălțimea, centrarea verticală se poate face astfel:
Element de blocare cu înălțime nefixată
Puteți să vă centrați, ridicându-vă jumătatea înălțimii după ce l-ați mutat pe jumătate în jos:
Toate acestea se pot face mult mai usor cu ajutorul flexboxului.
Atât pe orizontală cât și pe verticală
Tehnicile descrise mai sus pot fi combinate deoarece vă place să obțineți elemente perfect centrate. Dar, din experiența mea, de obicei, se ajunge la trei opțiuni:
Element cu înălțime și lățime fixă.
Utilizarea de indentări cu valori negative egale cu jumătate din înălțimea și lățimea elementului după poziționarea absolută la 50% / 50% a fost înregistrată pentru aceasta va centra elementul din interiorul părintelui. În plus, metoda este bine susținută de browsere:
Element cu înălțime și lățime nemodificate.
Dacă nu cunoașteți lățimea sau înălțimea, puteți folosi proprietatea de transformare și valoarea negativă a traducerii pentru 50% în ambele direcții (se calculează din lățimea / înălțimea curentă a elementului) pentru centrare:
Pentru a vă centra în ambele direcții utilizând flexbox, trebuie să utilizați două proprietăți de centrare:
Articole similare
Trimiteți-le prietenilor: