Ce să știi
- Pentru a centra textul, utilizați următorul cod („[/]” indică o întrerupere de linie): .center {[/] text-align: centru; [/] }.
- Centrați blocurile de conținut cu următorul cod („[/]” indică o întrerupere de linie): .center {[/] margin: auto; [/] lățime: 80em; [/] }.
- Pentru a centra o imagine („[/]” înseamnă o întrerupere de linie): img.center {[/] display: bloc; [/] margin-left: auto; [/] margin-dreapta: auto; [/] }.
CSS este cel mai bun mod de a centra elementele, dar poate fi o provocare pentru începătorii web designeri, deoarece există atât de multe modalități de realizare. Acest articol explică modul de utilizare a CSS pentru a centra textul, blocurile de text și imaginile.
Centrarea textului cu CSS
Trebuie să cunoașteți o singură proprietate de stil pentru a centra textul pe o pagină:
.centru {
text-align: centru;
}
Cu această linie de CSS, fiecare paragraf scris cu clasa .center va fi centrat orizontal în interiorul elementului său părinte. De exemplu, un paragraf din interiorul unei diviziuni (un copil al acelei diviziuni) ar fi centrat orizontal în interiorul.
Iată un exemplu al acestei clase aplicate în documentul HTML:
Acest text este centrat.
Când centrați textul cu proprietatea text-align, nu uitați că acesta va fi centrat în elementul care îl conține și nu neapărat centrat în pagina completă.
Citirea este întotdeauna esențială atunci când vine vorba de textul site-ului web. Mare blocuri de text justificat prin centru poate fi greu de citit, așa că folosiți acest stil cu cumpărare. Titlurile și blocurile mici de text, cum ar fi textul teaser pentru un articol, sunt de obicei ușor de citit atunci când sunt centrate; cu toate acestea, blocuri mai mari de text, cum ar fi un articol complet, ar fi dificil de consumat dacă sunt pe deplin justificate în centru.
Centrarea blocurilor de conținut cu CSS
Blocuri de conținut sunt create folosind HTML.
.centru {
margine: auto;
lățime: 80em;
}
Această prescurtare CSS pentru proprietatea de marjă ar seta marginile de sus și de jos la o valoare de 0, în timp ce stânga și dreapta ar folosi „auto”. Acest în esență, ia orice spațiu disponibil și îl împarte uniform între cele două părți ale ferestrei de vizualizare, centrând efectiv elementul pe pagina.
Aici este aplicat în HTML:
Întregul bloc este centrat,dar textul din interior este aliniat la stânga.
Atâta timp cât blocul dvs. are o lățime definită, acesta se va centra în interiorul elementului care conține. Textul conținut în acel bloc nu va fi centrat în interiorul acestuia, dar va fi justificat la stânga. Acest lucru se datorează faptului că textul este justificat la stânga ca implicit în browserele web. Dacă doriți și textul centrat, puteți utiliza proprietatea de aliniere a textului acoperită anterior împreună cu această metodă pentru a centra divizarea.
Centrarea imaginilor cu CSS
Deși majoritatea browserelor vor afișa imagini centrate utilizând aceeași proprietate de aliniere text, nu este recomandat de W3C. Prin urmare, există întotdeauna șansa ca versiunile viitoare ale browserelor să aleagă să ignore această metodă.
În loc să utilizați text-align pentru a centra o imagine, ar trebui să spuneți în mod explicit browserului că imaginea este un element la nivel de bloc. În acest fel, îl puteți centra așa cum ați face orice alt bloc. Iată CSS pentru a face acest lucru:
img.center {
display: bloc;
margine-stânga: auto;
marginea-dreapta: auto;
}
Și iată codul HTML pentru ca imaginea să fie centrată:
De asemenea, puteți centra obiecte folosind CSS inline (a se vedea mai jos), dar această abordare nu este recomandată deoarece adaugă stiluri vizuale la marcajul HTML. Nu uitați, stilul și structura ar trebui să fie separate; adăugarea stilurilor CSS la HTML va sparge această separare și, ca atare, ar trebui să o evitați ori de câte ori este posibil.
Centrarea elementelor pe verticală cu CSS
Centrarea obiectelor pe verticală a fost întotdeauna o provocare în designul web, dar lansarea Modul de aspect flexibil CSS în CSS3 oferă o modalitate de a face acest lucru.
Alinierea verticală funcționează similar cu aliniamentul orizontal acoperit mai sus. Proprietatea CSS este vertical-align, astfel:
.vcenter {
vertical-align: mijloc;
}
Toate browserele moderne susțineți acest stil CSS. Dacă aveți probleme cu browserele mai vechi, W3C vă recomandă să centrați textul vertical într-un container. Pentru a face acest lucru, plasați elementele în interiorul unui element care conține, cum ar fi a div, și setați o înălțime minimă pe acesta. Declarați elementul care conține ca o celulă de masă și setați alinierea verticală la „mijloc”.
De exemplu, iată CSS:
.vcenter {
min-înălțime: 12em;
afișaj: tabel-celulă;
vertical-align: mijloc;
}
Și iată codul HTML:
Acest text este centrat vertical în casetă.
Nu utilizați elementul HTML pentru a centra imagini și text; a fost învechit, iar browserele web moderne nu îl mai acceptă. Acesta este, în mare parte, un răspuns la separarea clară a structurii și stilului de către HTML5: HTML creează structură, iar CSS dictează stilul. Deoarece centrarea este o caracteristică vizuală a unui element (cum arată mai degrabă decât ce este), acel stil este tratat cu CSS, nu cu HTML. Folosiți în schimb CSS, astfel încât paginile dvs. să se afișeze corect și să respecte standardele moderne.
Centrare verticală și versiuni mai vechi de Internet Explorer
Puteți forța Internet Explorer (IE) să se centreze și apoi să utilizați comentarii condiționate, astfel încât doar IE să vadă stilurile, dar acestea să fie puțin detaliate și neatrăgătoare. Decizia Microsoft din 2015 de a renunța la asistență versiuni mai vechi ale IEcu toate acestea, va face acest lucru o problemă pe măsură ce IE nu mai este utilizat.