Centrarea unui bloc folosind CSS. Alinierea orizontală și verticală a elementelor în CSS

Un designer are uneori o întrebare: cum să centreze elementele pe verticală? Și asta provoacă anumite probleme. Cu toate acestea, există mai multe metode pentru centrarea elementelor pe verticală și fiecare dintre aceste metode este destul de simplă. Acest articol descrie unele dintre aceste metode.

Pentru a vedea fiecare metodă în acțiune, faceți clic pe butonul demo sau pe imagine.

Să discutăm câteva dintre lucrurile care împiedică centrarea verticală.

Centrarea orizontală a unui element este destul de ușor de implementat (folosind CSS). Un element inline poate fi centrat pe orizontală dând containerului său părinte o proprietate de aliniere a textului center . Când un element este un element bloc, pentru a-l centra, trebuie doar să setați lățimea (lățimea) și să setați valorile marginilor din dreapta (margine-dreapta) și din stânga (marja-stânga) la automat.

În ceea ce privește textul: mulți oameni încep să folosească proprietatea vertical-align pentru centrare. Este logic și prima mea alegere ar fi aceeași. Pentru a centra un element într-un tabel, puteți utiliza atributul valign.

Cu toate acestea, atributul valign funcționează numai atunci când este aplicat unei celule (de exemplu, ). Proprietatea de aliniere verticală CSS poate fi aplicată unei celule și unor elemente inline.

• Textul este centrat în raport cu înălțimea liniilor (spațiere între linii).
• În raport cu tabelul, fără a intra în detalii, centrarea are loc relativ la înălțimea rândului.

Din păcate, proprietatea de aliniere verticală nu poate fi aplicată elementelor la nivel de bloc, cum ar fi un paragraf (p) în interiorul unei etichete div.

Cu toate acestea, există și alte metode pentru centrarea verticală a elementelor și puteți utiliza în continuare proprietatea de aliniere verticală acolo unde este necesar. Ce metodă să utilizați depinde de ceea ce veți centra.

Această metodă ar trebui utilizată numai atunci când trebuie să centrați o linie de text. Pentru a face acest lucru, trebuie să setați înălțimea liniilor (spațierea între linii) a elementului care conține text la mai mare decât dimensiunea fontului.

În mod implicit, există spațiu egal deasupra și sub text, astfel încât textul este centrat vertical.

În acest caz, nu este necesar să specificați înălțimea elementului părinte.

Iată textul
CSS:
.Pos-Container.is-Table ( display: table; ) .is-Table .Table-Cell ( display: table-cell; vertical-align: middle; ) .is-Table .Center-Block ( lățime: 50%; marja: 0 auto;
Avantaje:

• Înălțime variabilă
• Aspectul nu funcționează când există o cantitate mare de text într-un bloc
• Compatibilitate între browsere

• Structură complexă

Pos-Container.is-Flexbox ( display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; - moz-box-align: -ms-flex-align: -webkit-align-items: center -ms-flex-pack; : centru; justificare-conținut: centru)
Avantaje:

• Conținutul poate avea orice înălțime sau lățime
• Poate fi folosit în cazuri mai complexe

• Nu există suport pentru IE 8-9
• Necesită container sau stiluri în corp
• Necesită o mare varietate de prefixe pentru a funcționa corect în browserele moderne
• Posibile probleme de performanță

Dacă tăiați orice site web creat pe baza html, atunci veți vedea o anumită structură stratificată. Mai mult, aspectul său va fi asemănător cu un tort stratificat. Dacă ți se pare așa, atunci cel mai probabil nu ai mâncat de mult. Așa că mai întâi potoliți-vă foamea, apoi vă vom spune cum să centrați un strat div pe site-ul dvs.:

Există două tipuri principale de structură a site-ului web:

• Tabular;
• Bloc.

Aspectul tabelar era dominant chiar și în zorii Internetului. Avantajele sale includ precizia poziționării specificate. Dar, cu toate acestea, are deficiențe evidente. Principalele sunt lungimea codului și viteza scăzută de încărcare.

Când utilizați aspectul tabelului, pagina web nu va fi afișată până când nu este încărcată complet. În timp ce utilizați blocuri div, elementele sunt afișate imediat.

Pe lângă viteza mare de încărcare, blocarea unui site web vă permite să reduceți de mai multe ori cantitatea de cod HTML. Inclusiv prin utilizarea claselor CSS.

Cu toate acestea, aspectul tabelar ar trebui utilizat pentru a structura afișarea datelor pe pagină. Un exemplu clasic de utilizare a acestuia este afișarea tabelelor.

Construcția blocurilor bazată pe etichete este numită și strat cu strat, iar blocurile în sine sunt numite straturi. Acest lucru se datorează faptului că, atunci când sunt utilizate anumite valori de proprietate, acestea pot fi stivuite una peste alta, similar straturilor din Photoshop.

În aspectul bloc, este mai bine să poziționați straturile folosind foi de stil în cascadă. Principala proprietate CSS responsabilă pentru aspect este float.
Sintaxa proprietății:
float: stânga | dreapta | niciunul | moşteni
Unde:

• stânga – aliniați elementul la marginea din stânga a ecranului. Curgerea în jurul elementelor rămase are loc în dreapta;
• dreapta – aliniere la dreapta, curgere în jurul altor elemente – la stânga;
• nici unul – împachetarea nu este permisă;
• inherit – moștenește valoarea elementului părinte.

Să ne uităm la un exemplu ușor de poziționare a div-urilor folosind această proprietate:

#stânga ( lățime: 200px; înălțime: 100px; float: stânga; fundal: rgb(255,51,102); ) #right ( lățime: 200px; înălțime: 100px; float: dreapta; fundal: rgb(0,255,153); ) Bloc din stânga Blocul din dreapta

Acum vom încerca să folosim aceeași proprietate pentru a poziționa al treilea div în centrul paginii. Dar, din păcate, float nu are o valoare centrală. Și când dați unui bloc nou o valoare de aliniere la dreapta sau la stânga, acesta este deplasat în direcția specificată. Prin urmare, tot ce rămâne este să setați float: lăsat la toate cele trei blocuri:

Dar nici aceasta nu este cea mai bună opțiune. Când fereastra este mai mică, toate straturile sunt aliniate pe un rând vertical, iar când dimensiunea este mărită, se lipesc de marginea stângă a ferestrei. Deci avem nevoie de o modalitate mai bună de a centra div-ul.

În exemplul următor, vom folosi un strat de container în care vom plasa elementele rămase. Acest lucru rezolvă problema blocurilor care se mișcă unul față de celălalt atunci când dimensiunea ferestrei este modificată. Centrarea containerului în mijloc se face prin setarea proprietăților marginii la zero pentru marginile de la marginea superioară și automat pe părțile laterale (marja: 0 auto):

#container ( lățime: 600px; margine: 0 automat; ) #stânga ( lățime: 200px; înălțime: 100px; flotant: stânga; fundal: rgb(255,51,102); ) #dreapta ( lățime: 200px; înălțime: 100px; flotant : stânga; fundal: rgb(0,255,153); #center (lățime: 200px; înălțime: 100px; float: stânga; fundal: rgb(255,0,0); )

Același exemplu arată cum puteți centra un div pe orizontală. Și dacă editați ușor codul de mai sus, puteți obține alinierea verticală a blocurilor. Pentru a face acest lucru, trebuie doar să modificați lungimea stratului de container (reduceți-l). Adică, după editarea clasei sale css ar trebui să arate astfel:

După schimbare, toate blocurile se vor alinia strict într-un rând la mijloc. Și poziția lor nu se va schimba indiferent de dimensiunea ferestrei browserului. Iată cum arată centrarea verticală a unui div:

În exemplul următor, am folosit o serie de proprietăți CSS noi pentru a centra straturile în interiorul unui container:

#container ( lățime: 450 px; înălțime: 150 px; margine: 0 automat; culoarea fundalului: #66CCFF; ) # stânga ( lățime: 100 px; înălțime: 100 px; fundal: rgb(255,51,102); afișaj: bloc inline; vertical-align: middle; margin-left: 35px ) #right ( lățime: 100px; înălțime: 100px; fundal: rgb(0,255,153); display: inline-block; vertical-align: middle; margin-left: 35px; ) #center ( lățime: 100px; înălțime: 100px; fundal: rgb(255,0,0); afișare: bloc inline; aliniere verticală: mijloc; margine-stânga: 35px; )

O scurtă descriere a proprietăților css și a valorilor lor pe care le-am folosit în acest exemplu pentru a centra un div într-un div:

• display: inline-block – aliniază un element bloc într-o linie și asigură că se înfășoară în jurul altui element;
• vertical-align: middle – aliniază elementul la mijloc în raport cu părintele;
• margin-left – setează marginea din stânga.

Oricât de ciudat ar suna, acest lucru este posibil. Uneori, un bloc div ca link poate fi necesar atunci când amenajați diferite tipuri de meniuri. Să ne uităm la un exemplu practic de implementare a unui strat de legătură:

#layer1( lățime: 500px; înălțime: 100px; fundal: rgb(51.255.204); border:groove; ) a ( afișare: bloc; text-align: center; înălțime: 100%; culoare: rgb(255,0,51) ; ) Link către site-ul nostru

În acest exemplu, folosind linia de afișare: bloc, setăm legătura la valoarea unui element bloc. Și pentru ca întreaga înălțime a blocului div să devină o legătură, setați înălțimea: 100%.

Elementele bloc oferă mai multe oportunități de extindere a funcționalității interfeței decât aspectul tabelar învechit. Se întâmplă adesea ca designul site-ului web să fie unic și ușor de recunoscut. Dar pentru o astfel de exclusivitate trebuie să plătești din lipsă de spațiu liber.

Acest lucru este valabil mai ales pentru pagina principală, costul publicității pe care este cel mai mare. Prin urmare, se pune problema unde să „împingă” un alt banner publicitar. Și aici nu poți scăpa cu alinierea div-ului la centrul paginii!

O soluție mai rațională este să ascundă un bloc. Iată un exemplu simplu de astfel de implementare:

#layer1( display:block; lățime: 500px; înălțime: 100px; fundal: rgb(51,255,204); border:groove; ) function show() ( if(layer1=="none") ( layer1="bloc"; ) else ( layer1="none"; ) document.getElementById("layer1").style.display=layer1 )

Acesta este butonul magic. Făcând clic pe el, va ascunde sau afișa blocul de ascundere.

În acest exemplu, locația blocurilor div nu se schimbă în niciun fel. Aceasta folosește o funcție JavaScript simplă care modifică valoarea proprietății de afișare css după ce se face clic pe un buton (eveniment onclick).

sintaxa de afișare:
afisare: bloc | în linie | inline-block | inline-table | articol-listă | niciunul | rulare | masa | table-caption | tabel-celula | tabel-coloană-grup | tabel-coloană | tabel-subsol-grup | tabel-antet-grup | masă-rând | tabel-rând-grup

După cum puteți vedea, această proprietate poate lua multe valori. Prin urmare, este foarte util și poate fi folosit pentru poziționarea elementelor. Într-unul dintre exemplele anterioare, am folosit una dintre valorile sale (inline-block) pentru a centra un div într-un div.

Am folosit două valori pentru proprietatea de afișare pentru a ascunde și afișa stratul.

Alinierea textului pe verticală în CSS este o muncă destul de dificilă. Am văzut destui oameni care se luptă cu asta încât să găsesc în mod constant erori „critice” atunci când vine vorba de design responsive real.

Dar nu vă temeți: dacă vă luptați deja cu alinierea verticală CSS, ați ajuns la locul potrivit.

Când am început să lucrez în dezvoltarea web, m-am luptat puțin cu această proprietate. M-am gândit că ar trebui să funcționeze ca proprietatea clasică „text-align”. Oh, dacă totul ar fi atât de simplu...

Proprietatea CSS de aliniere verticală funcționează bine cu tabelele, dar nu și cu div-urile sau alte elemente. Când îl utilizați pe un div, acesta aliniază elementul în raport cu alte div-uri, dar nu și conținutul său. În acest caz, proprietatea funcționează numai cu afișarea: inline-block; .

Vezi exemplul

Aveți două opțiuni. Dacă aveți doar elemente div cu text, atunci puteți utiliza proprietatea line-height. Aceasta înseamnă că trebuie să cunoașteți înălțimea elementului, dar nu o puteți seta. În acest fel, textul tău va fi întotdeauna în centru.

Există totuși un dezavantaj al acestei abordări de aliniere verticală CSS. Dacă textul are mai multe linii, atunci înălțimea liniei va fi înmulțită cu numărul de linii. Cel mai probabil, în acest caz, vei ajunge cu o pagină teribil de aranjată.

Aruncă o privire la acest exemplu

Dacă conținutul pe care doriți să îl centrați constă din mai multe rânduri, atunci este mai bine să utilizați div-urile de tabel. Puteți folosi și tabele, dar acest lucru nu este corect din punct de vedere semantic. Dacă aveți nevoie de pauze în scopuri receptive, este mai bine să utilizați elemente div.

Pentru ca acest lucru să funcționeze, trebuie să existe un container părinte cu display: table și în interiorul acestuia numărul dorit de coloane pe care doriți să le centrați folosind display: table-cell și vertical-align: middle .

Vezi exemplul

De ce funcționează acest lucru cu marcajul tabelului, dar nu cu elementele div? Pentru că rândurile din tabel au aceeași înălțime. Atunci când conținutul unei celule de tabel nu folosește tot spațiul disponibil în înălțime, browserul adaugă automat umplutură verticală pentru a centra conținutul.

Să începem cu elementele de bază ale alinierii verticale CSS div:

• poziție: static este implicit. Elementul este redat conform ordinii HTML;
• poziție: absolută - folosită pentru a determina poziția exactă a unui element. Această poziție este întotdeauna legată de cel mai apropiat element părinte poziționat relativ (nu static). Dacă nu determinați poziția exactă a unui element, veți pierde controlul asupra acestuia. Va apărea aleatoriu, ignorând complet fluxul documentului. În mod implicit, elementul apare în colțul din stânga sus;
• poziție: relativă - folosită pentru a poziționa un element față de poziția sa normală (statică). Această valoare păstrează ordinea fluxului de documente;
• poziție: fixă ​​- folosită pentru a poziționa elementul în raport cu fereastra browserului, astfel încât să fie întotdeauna vizibil în fereastra de vizualizare.

Notă: Unele proprietăți (sus și indexul z) funcționează numai dacă elementul este setat pe poziție (nu static).

Doriți să implementați alinierea centrală verticală CSS? Mai întâi creați un element cu poziție și dimensiuni relative. De exemplu: 100% în lățime și înălțime.

Al doilea pas poate varia în funcție de browserele țintă, dar puteți utiliza una dintre cele două opțiuni:

• Proprietate veche: trebuie să cunoașteți dimensiunea exactă a ferestrei pentru a elimina jumătate din lățime și jumătate din înălțime. Uită-te la exemplu;
• Noua proprietate CSS3: puteți adăuga o proprietate de transformare cu o valoare de translație de 50%, iar blocul va fi întotdeauna în centru. Vezi exemplu.

Practic, dacă doriți să centrați conținutul, nu utilizați niciodată partea de sus: 40% sau stânga: 300px . Acest lucru funcționează bine pe ecranele de testare, dar nu este centrat.

Amintiți-vă poziția: fix? Puteți face același lucru cu el ca și cu o poziție absolută, dar nu aveți nevoie de o poziție relativă pentru elementul părinte - acesta va fi întotdeauna poziționat relativ la fereastra browserului.

Puteți folosi flexbox. Aceasta este mult mai bună decât orice altă opțiune de aliniere verticală a textului în centru CSS. Cu flexbox, gestionarea elementelor este ca o joacă de copii. Problema este că trebuie să renunțați la unele browsere, cum ar fi IE9 și versiunile de mai jos. Iată un exemplu despre cum să centrați vertical un bloc:

Vezi exemplu

Folosind un aspect flexbox, puteți centra mai multe blocuri.

Dacă aplicați ceea ce ați învățat din aceste exemple, veți putea stăpâni alinierea blocurilor verticale CSS în cel mai scurt timp.

Învățarea de marcare CSS

FlexBox Froggy

Cutie de nisip Flexbox

Traducerea articolului „CSS Vertical Align for Everyone (Dummies Included)” a fost pregătită de echipa prietenoasă a proiectului.

În general, centrarea elementelor HTML pe o pagină nu este o chestiune dificilă. În unele cazuri... dezvoltatorii web trebuie să-și dezvolte mintea pentru a găsi cea mai bună soluție.

Centrarea elementelor pe orizontală nu este atât de dificilă pe verticală, ridică deja întrebări, dar combinarea lor în general poate fi o culpă. În era designului responsive, rareori suntem clari cu privire la dimensiunile exacte ale anumitor elemente. Am numărat 6 moduri diferite de a centra elementele folosind CSS. Să începem cu exemple simple și să terminăm cu altele mai complexe. Va funcționa cu același cod HTML:

Uneori, cea mai simplă soluție este cea mai bună:

Div.center ( text-align: center; background: hsl(0, 100%, 97%); ) div.center img ( lățime: 33%; înălțime: automat; )

Nu există nicio centrare verticală aici: pentru aceasta va trebui să adăugați proprietățile margin-top și margin-bottom la div.

O altă soluție pentru alinierea orizontală:

Div.center ( fundal: hsl(60, 100%, 97%); ) div.center img ( afișare: bloc; lățime: 33%; înălțime: automat; margine: 0 automat; )

Vă rugăm să rețineți că pentru această metodă trebuie să setați afișarea: proprietatea bloc.

Utilizând display: table-cell, ne putem asigura că elementul este centrat atât pe verticală, cât și pe orizontală. Dar aici trebuie să plasăm imaginea într-un alt element div.

Aliniat la centru ( afișare: tabel; fundal: hsl(120, 100%, 97%); lățime: 100%; ) .center-core ( afișare: tabel-celulă; text-align: centru; vertical-align: mijloc; ) .img miez central ( lățime: 33%; înălțime: automat; )

Pentru ca totul să funcționeze corect, div-ul trebuie setat la lățime: 100%. Pentru a centra elementul pe verticală, vom folosi tehnici standard prin setarea înălțimii. Funcționează peste tot, inclusiv IE8+.

O solutie foarte interesanta. Ideea este că trebuie să setați înălțimea containerului exterior:

Aliniat absolut (poziție: relativă; înălțime minimă: 500 px; fundal: hsl(200, 100%, 97%); ) .Imagine aliniată în absolut ( lățime: 50%; lățime minimă: 200 px; înălțime: automat; depășire) : auto;

O nouă soluție care utilizează transformări CSS. Oferă atât alinierea orizontală, cât și verticală:

Centru ( fundal: hsl(180, 100%, 97%); poziție: relativă; înălțime minimă: 500px; ) .center img (poziție: absolut; sus: 50%; stânga: 50%; transformare: translate(-50) %, -50%) latime: 30%;

Există mai multe dezavantaje:

• Proprietatea de transformare CSS necesită prefixe de browser
• Nu funcționează în versiunile mai vechi de IE (8 și mai jos)
• Containerul exterior trebuie să aibă o înălțime.
• Dacă există text în interiorul recipientului, acesta poate fi puțin neclar.

Probabil cea mai simplă variantă.

Center ( fundal: hsl(240, 100%, 97%); afișare: flex; justify-content: center; align-items: center; ) .center img ( lățime: 30%; înălțime: automat; )

Nu funcționează în toate versiunile de IE (deși vă puteți proteja folosind în plus display: table-cell). CSS complet:

Center ( fundal: hsl(240, 100%, 97%); afișaj: -webkit-box; /* Safari, iOS 6 și versiuni anterioare; Android, WebKit mai vechi */ afișare: -moz-box; /* Firefox (poate și buggy) */ display: -ms-flexbox /* IE 10 */ display: -webkit-flex /* Chrome 21+ */ display: flex 12.1+, Firefox 22+; -align: center; -justificare-conținut: centru;

În unele cazuri, această metodă este mai versatilă decât utilizarea flexbox:

Center ( fundal: hsl(300, 100%, 97%); înălțime minimă: 600px; poziție: relativă; ) .center img ( lățime: 40%; înălțime: automat; poziție: absolut; sus:calc(50% -) 20%); stânga: calc(50% - 20%);

Este foarte simplu, putem calcula dimensiunile de care avem nevoie în funcție de întregul aspect al paginii. Calculele sunt foarte simple, 50% este punctul central al containerului, dar sarcina noastră este să plasăm colțul din stânga sus al imaginii la aceste coordonate. Apoi, scădeți jumătate din înălțimea și lățimea imaginii. Formula este următoarea:

Top: calc(50% - (40% / 2)); stânga: calc(50% - (40% / 2));

În practică, puteți descoperi că această metodă funcționează bine dacă cunoaștem dimensiunile elementelor:

Imagine centrală ( lățime: 500px; înălțime: 500px; poziție: absolut; sus:calc(50% - (300px / 2)); stânga: calc(50% - (300px - 2)); )

Această metodă este acceptată de Firefox, începând cu versiunea 4, va trebui să înregistrați prefixele browserului. Nu funcționează în IE 8. Cod complet:

Imagine centrală ( lățime: 40%; înălțime: automat; poziție: absolut; sus: -webkit-calc(50% - 20%); stânga: -webkit-calc(50% - 20%); sus: -moz-calc (50% - 20%): -moz-calc(50% - 20%): calc(50% - 20%);

Sper că aceste metode sunt suficiente pentru ca tu să găsești cea mai bună soluție pentru tine.