Utilizarea CSS este cea mai optimă metodă de centrare a imaginilor, a blocurilor de text și chiar a întregului design al unei pagini web. Cele mai multe proprietăți pentru alinierea HTML au devenit disponibile în CSS. de la versiunea 1.0. Acestea funcționează bine cu browserele web CSS3 și moderne:
Aplicații CSS pentru centrare în HTML
Centrarea cu CSS poate fi o provocare pentru incepatori web designeri. Există multe modalități de a face acest lucru, dar nu toate se aplică fiecărui element.
CSS poate fi folosit pentru:- Centrează textul;
- Pentru a centra elementul bloc (de exemplu, div);
- Imagine centrală;
- Centura verticală a blocului sau a imaginii.
Acum mulți ani, designerii web ar putea folosi
Sfaturi pentru centrarea cu CSS
HTML este folosit pentru a crea o structură, iar CSS definește stiluri. Deoarece centrifugarea este o caracteristică vizuală, ea este implementată folosind stiluri de cascadă.
Centrarea textului cu CSS
Cea mai ușoară modalitate de a centra textul pe o pagină Web. Pentru a face acest lucru, aveți nevoie de o singură proprietate: HTML text align:
Cu această linie de cod, fiecare paragraf cu centrul de clasă va fi centrat orizontal în interiorul elementului părinte.
Aplicații din această clasă:
Când aliniați textul în centru utilizând proprietatea text-align, amintiți-vă că acesta va fi centrat în interiorul containerului care conține containerul și nu neapărat în raport cu întreaga pagină.
Centrarea blocurilor de conținut utilizând CSS
Blocurile sunt orice elemente de pe pagină care sunt setate ca elemente la nivel de bloc și au o anumită lățime. Adesea, astfel de blocuri sunt create folosind
Cea mai obișnuită metodă pentru blocurile centrale este de a seta indicele stânga și dreapta la auto:
Această formă prescurtată a proprietății de marjă stabilește valoarea pentru margini superioare și inferioare la 0. Indentsul din stânga și din dreapta vor utiliza valoarea automată. Astfel, ea are grijă de tot spațiul disponibil și o împarte egal între cele două părți, ceea ce este echivalent cu HTML div align.
Aplicarea în HTML:
Deoarece blocul are o anumită lățime, acesta va fi centrat în interiorul elementului care îl conține. Textul din acest bloc va fi aliniat nu la centru, ci la stânga. Deoarece în mod prestabilit în browsere textul este aliniat la stânga. Pentru a face textul centrat, utilizați proprietatea text-align. pe care am descris-o mai devreme.
Centrarea imaginilor cu CSS
Cele mai multe browsere vor afișa imagini centrate când se utilizează proprietatea HTML aliniate în text. Dar nu se bazează pe această metodă, deoarece nu este recomandată de W3C.
În schimb, trebuie să spuneți în mod explicit browser-ului că imaginea este un element la nivel de bloc. Iată CSS pentru aceasta:
Aici este codul HTML pentru imaginea pe care doriți să o centrați:
De asemenea, puteți centra obiectele utilizând CSS-ul încorporat:
Centrarea verticală a elementelor utilizând CSS
Alinierea verticală a HTML a fost întotdeauna problematică în designul web, dar cu lansarea specificației modulului CSS Flexible Box Layout în CSS3. a apărut o soluție pentru această sarcină.
Alinierea verticală funcționează exact ca alinierea orizontală descrisă mai sus. Proprietatea vertical-align with a middle value:
Dezavantajul acestei abordări este că nu toate browserele suportă CSS FlexBox. Dacă există probleme cu versiunile anterioare ale browserelor, W3C recomandă centrarea textului vertical în container utilizând următoarea metodă:- Plasați elementele pe care doriți să le centrați în interiorul unui element de container, cum ar fi div;
- Specificați înălțimea minimă a elementului containerului;
- Declarați elementul containerului;
- Setați linia verticală HTML la mijloc.
Centrarea verticală și versiunile anterioare ale Internet Explorer
Traducerea articolului "Utilizați CSS pentru a centra imagini și alte obiecte HTML" a fost pregătită de echipa prietenoasă a proiectului Saitostroenie de la A la Z.