Un ghid practic pentru centrare în CSS

După cum am menționat pe scurt în introducerea mea în funcțiile matematice CSS – după publicarea articolului util trucuri CSS – am văzut trafic venind pe acest site pentru cuvinte cheie precum „cum se centra CSS”. Așadar, are sens doar să pun în sfârșit și eu un astfel de articol.

Sunt sigur că problema cu centrarea lucrurilor folosind CSS nu este despre amintirea justify-content: center; proprietate. Este mai mult de-a face cu faptul că diferitele structuri de layout au propriile reguli și s-ar putea să nu respecte o anumită abordare.

Dar, în primul rând, pentru cine este creat acest ghid:

• Dezvoltatori front-end care se simt copleșiți de „regulile și reglementările” CSS.
• Oricine îi este greu să-și concentreze div-ul odată pentru totdeauna. Aaahhhh!!
• Proprietarii de site-uri web care sunt blocați cu șabloane/teme prost structurate.

În CSS, centrarea este adesea denumită verticală, orizontală sau verticală și orizontală.

De asemenea, îl puteți interpreta ca Stânga, Dreapta și Stânga și Dreapta. Și, în unele cazuri, s-ar putea să vedeți că acesta este denumit de sus și de jos. Aceștia vor fi, de asemenea, termenii pe care îi folosim în acest ghid. Acestea fiind spuse, să începem cu cea mai căutată abordare dintre toate.

Elemente în linie și bloc: text-align

Unul dintre lucrurile care ar putea să nu pară evidente la început este că text-align: center; funcționează pentru mai mult decât doar paragrafe. Ca proprietate, poate fi aplicată oricărui element care este considerat bloc. Aceasta înseamnă că, atâta timp cât conținutul dvs. este împachetat în <div> sau într-un element similar, acesta poate fi centrat folosind text-align .

CSS și HTML

 <style> .text-align-container { display: flex; } .text-align-container-style .item { background: #fff2ea; padding: 20px 0; text-align: center; width: 100%; } </style> <div class="text-align-container text-align-container-style"> <div class="item">Hi, I am centered.</div> </div>

Lucrul frumos la această abordare este că funcționează atât pentru Grid, cât și pentru Flexbox. Atâta timp cât includeți conținut în div, va funcționa la fel de bine pentru conținut precum imagini.

Și funcționează bine și cu liste:

Să vedem ce se întâmplă dacă încercăm să centrem un element <span> fără a-l împacheta mai întâi într-un container bloc.

CSS și HTML

 .span-demo-container { background: #fff2ea; padding: 20px 0; width: 100%; } .span-demo-center { text-align: center; } <div class="span-demo-container"> <span class="span-demo-center">Am I in the center?</span> </div>

Iar rezultatul este:

Motivul pentru care acest element <span> nu este centrat este pentru că este un element inline. Pentru elementele inline, doriți întotdeauna să setați un părinte .

Deci, dacă ne întoarcem și luăm clasa span-demo-center și o aplicăm la <div> - rezultatul va fi astfel:

Dacă lucrați cu o bază de cod mare sau utilizați un șablon slab structurat, acesta este de obicei principalul motiv pentru care centrarea nu funcționează. Ca atare, verificați întotdeauna elementele bloc și inline și vedeți dacă sunt imbricate corect.

Elemente bloc de centrare cu o lățime fixă

O altă metodă populară pentru centrarea elementelor este utilizarea margin: auto; , care este cel mai frecvent utilizat pentru elementele bloc cu o lățime fixă.

Deci, gândiți-vă la un div personalizat într-un container mai mare. Și apoi încercați să puneți conținut în acel element div personalizat și să îl centrați.

Să facem un exemplu viu pentru a-l vedea în acțiune:

CSS și HTML

 .margin-auto-container { background: #fff2ea; padding:1rem; } .margin-auto-inner { width: 200px; padding: 1rem; background: #efba93; color: #fff; margin: 0 auto; text-align: center; } <div class="margin-auto-container"> <div class="margin-auto-inner">Div & Text centered.</div> </div>

În acest exemplu, clasa margin-auto-container preia containerul din această postare pe blog – apoi creăm o nouă clasă numită margin-auto-inner și îi aplicăm o lățime fixă ​​cu stil personalizat. În sfârșit, aplicăm margin: 0 auto; pentru a ne asigura că containerul nostru interior va rămâne centrat în raport cu containerul principal.

 De ce 0? Adăugăm 0 pentru că dorim să lăsăm marginea verticală (sus și jos) așa cum este și să aplicăm marja automată vizualizării orizontale (dreapta și stânga). Puteți modifica acest lucru pentru a specifica marje individuale, cum ar fi „margin: 25px auto 50px;” care ar lăsa o marjă de 25 de pixeli în partea de sus și o marjă de 50 de pixeli în partea de jos.

Important: Motivul marjei dvs.: auto; nu este centrat deoarece nu ați setat o lățime fixă ​​pentru elementul pe care încercați să îl centrați.

Mai specificăm text-align: center; deoarece aceasta va centra textul în interiorul containerului interior.

Centrarea elementelor inline cu o lățime fixă

În cazul unui element inline, lățimea personalizată este ignorată.

Să ne uităm la o demonstrație:

CSS și HTML

 .margin-auto-container { background: #fff2ea; padding:1rem; } .margin-auto-inner-span { width: 150px; padding: 5px; background: #efba93; color: #fff; margin: 0 auto; text-align: center; } <div class="margin-auto-container"> <span class="margin-auto-inner-span">Inline <span> element with custom width. (Not centered).</span> </div>

Iar rezultatul este:

După cum puteți vedea, în ciuda setării margin: auto; elementul inline span nu este centrat.

Din fericire, există o soluție ușoară pentru acest lucru. Prin adăugarea display: block; proprietate la clasa noastră margin-auto-inner-span – putem spune browserului că dorim ca acel element specific să fie tratat ca un bloc . Și acum ar trebui să fie centrat:

În acest moment, s-ar putea să vă întrebați ce elemente HTML sunt considerate blocuri și care ca fiind Inline . De inteles. Vă recomand să vă uitați la referința MDN:

• Elemente la nivel de bloc
• Elemente în linie

Dacă cunoașteți diferența dintre Inline și Block, va fi mult mai ușor să găsiți soluția de centrare potrivită pentru problema dvs.

Grid și Flexbox: modul modern

Grid și Flexbox sunt cele două module de layout utilizate în designul web modern. În timp ce Flexbox este un sistem de aspect unidimensional, Grid se bazează pe o abordare bidimensională.

Și centrarea unui div pentru ambele machete se poate face cu doar două linii de cod.

Verticală și orizontală: o soluție universală

Pentru ambele aspecte Grid și Flexbox, puteți utiliza place-content: center; proprietate.

CSS și HTML

 .center-div-grid-layout { display: grid; /* display: flex; */ place-content: center; } <div class="center-div-grid-layout">It's that easy.</div>

Proprietatea place-content este o prescurtare pentru align-content și justify-content .

Cu place-content puteți face o multitudine de variații de plasare, în funcție de stilul unui aspect cu care lucrați:

Pentru referință completă, consultați această pagină MDN.

În general, există un număr foarte mic de cazuri marginale în care tehnicile de centrare prezentate nu ar fi suficiente. Dacă lucrați cu un aspect vechi, cel mai bun pariu este să găsiți inconsecvențe în numele claselor în interiorul foii de stil în sine. Apoi, găsiți o modalitate de a imbrica corect elementele, astfel încât logica de centrare specificată să fie executată corect.

Centrare absolută: transformare

Proprietatea de transform este folosită atunci când doriți ca ceva să fie centrat „mort în centru” – orizontal și vertical (stânga, dreapta, sus, jos).

CSS și HTML

 .transform-example-container { height: 150px; position: relative; background: #fff2ea; } .transform-example-container .transform-absolute { width: 300px; text-align: center; background: #efba93; color: #fff; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); margin: 0; padding: 10px 0; position: absolute; } <div class="transform-example-container"> <p class="transform-absolute">Example: CSS transform</p> </div>

Acest lucru funcționează prin setarea poziției la absolut pentru elementul copil pe care doriți să-l centrați.

Este important ca elementul părinte să aibă poziția relativă , în caz contrar, proprietatea de transformare va folosi aspectul principal ca părinte.

Folosim sus și stânga pentru a seta poziția în raport cu colțul din stânga sus. După care, elementul poate fi tras în centru folosind translate() .

Marja și umplutura ar trebui să fie setate la 0, sau veți experimenta o schimbare de poziție.

Și asta încheie tutorialul/referința noastră. Dacă doriți să stăpâniți centrarea cu CSS - porniți editorul de cod preferat și începeți să puneți aceste exemple la încercare.