Alinierea verticală Css. Alinierea orizontală și verticală a elementelor în CSS

Fiecare designer de layout se confruntă în mod constant cu nevoia de a alinia conținutul într-un bloc: orizontal sau vertical. Există mai multe articole bune pe acest subiect, dar toate oferă o mulțime de opțiuni interesante, dar puține practice, motiv pentru care trebuie să aloci timp suplimentar pentru a evidenția punctele principale. Am decis să prezint aceste informații într-o formă care îmi este convenabilă, ca să nu mai caut pe google.

Alinierea blocurilor cu dimensiuni cunoscute

Cel mai simplu mod de a utiliza CSS este alinierea blocurilor care au o înălțime cunoscută (pentru alinierea verticală) sau lățime (pentru alinierea orizontală).

Alinierea folosind umplutură

Uneori nu puteți centra un element, ci îi puteți adăuga margini folosind proprietatea „padding”.

De exemplu, există o imagine de 200 x 200 pixeli și trebuie să o centrați într-un bloc de 240 x 300. Putem seta înălțimea și lățimea blocului exterior = 200px și adăugați 20 de pixeli în partea de sus și de jos , și 50 la stânga și la dreapta.

.example-wrapper1 ( fundal : #535E73 ; lățime : 200 px ; înălțime : 200 px ; padding : 20 px 50 px ; ) Aliniați blocurile poziționate absolut

Dacă un bloc este setat la „poziție: absolut”, atunci poate fi poziționat relativ la cel mai apropiat părinte cu „poziție: relativ”. Pentru a face acest lucru, trebuie să atribuiți aceeași valoare tuturor proprietăților („sus”, „dreapta”, „jos”, „stânga”) ale blocului interior, precum și „marjă: auto”.

*Există o nuanță: lățimea (înălțimea) blocului interior + valoarea stânga (dreapta, jos, sus) nu trebuie să depășească dimensiunile blocului părinte. Este mai sigur să atribuiți 0 (zero) proprietăților din stânga (dreapta, jos, sus).

.example-wrapper2 ( poziție : relativă ; înălțime : 250 px ; fundal : url(space.jpg) ; ) .cat-king ( lățime : 200 px ; înălțime : 200 px ; poziție : absolut ; sus : 0 ; stânga : 0 ; jos : 0 ; dreapta : 0 ; margine : automat ; fundal : url(king.png) ; ) Aliniere orizontală Aliniere folosind „text-align: center”

Pentru a alinia textul într-un bloc, există o proprietate specială „text-align”. Când este setată la „centru”, fiecare linie de text va fi aliniată orizontal. Pentru textul cu mai multe linii, această soluție este folosită extrem de rar; mai des această opțiune poate fi găsită pentru alinierea intervalelor, legăturilor sau imaginilor.

Odată a trebuit să vin cu ceva text pentru a arăta cum funcționează alinierea textului folosind CSS, dar nu mi-a venit în minte nimic interesant. La început m-am hotărât să copiez undeva o rimă pentru copii, dar mi-am amintit că acest lucru ar putea strica unicitatea articolului, iar dragii noștri cititori nu l-ar putea găsi pe Google. Și apoi am decis să scriu acest paragraf - la urma urmei, punctul nu este cu el, dar punctul este aliniat.

.example-text ( text-align : center ; padding : 10px ; background : #FF90B8 ; )

Este demn de remarcat faptul că această proprietate va funcționa nu numai pentru text, ci și pentru orice elemente inline ("display: inline").

Dar acest text este aliniat la stânga, dar este într-un bloc care este centrat în raport cu învelișul.

.example-wrapper3 ( text-align : center ; background : #FF90B8 ; ) .inline-text ( display : inline-block ; lățime : 40% ; padding : 10px ; text-align : stânga ; fundal : #FFE5E5 ; ) Aliniere blocuri folosind marginea

Elementele bloc cu o lățime cunoscută pot fi aliniate cu ușurință pe orizontală, setându-le la „margin-left: auto; margin-right: auto”. De obicei se folosește notația scurtă: „margin: 0 auto” (orice valoare poate fi folosită în loc de zero). Dar această metodă nu este potrivită pentru alinierea verticală.

.lama-wrapper ( înălțime : 200px ; fundal : #F1BF88 ; ) .lama1 ( înălțime : 200px ; lățime : 200px ; fundal : url(lama.jpg) ; margine : 0 auto ; )

Așa ar trebui să aliniați toate blocurile, acolo unde este posibil (unde nu este necesară poziționarea fixă sau absolută) - este cel mai logic și adecvat. Deși acest lucru pare evident, am văzut uneori exemple înfricoșătoare cu indentări negative, așa că am decis să clarific.

Aliniere verticală

Alinierea verticală este mult mai problematică - aparent, acest lucru nu a fost prevăzut în CSS. Există mai multe modalități de a obține rezultatul dorit, dar toate nu sunt foarte frumoase.

Alinierea cu proprietatea înălțimea liniei

În cazul în care există o singură linie într-un bloc, puteți obține alinierea verticală a acesteia folosind proprietatea „line-height” și setând-o la înălțimea dorită. Pentru a fi în siguranță, ar trebui să setați și „înălțimea”, a cărei valoare va fi egală cu valoarea „înălțimea liniei”, deoarece aceasta din urmă nu este acceptată în toate browserele.

.example-wrapper4 (înălțimea liniei: 100px; culoare: #DC09C0; fundal: #E5DAE1; înălțimea: 100px; alinierea textului: centru; )

De asemenea, este posibil să se realizeze alinierea blocului cu mai multe linii. Pentru a face acest lucru, va trebui să utilizați un bloc suplimentar de înveliș și să setați înălțimea liniei la acesta. Un bloc intern poate fi cu mai multe linii, dar trebuie să fie „inline”. Trebuie să-i aplicați „vertical-align: middle”.

.example-wrapper5 (înălțimea liniei: 160px; înălțimea: 160px; dimensiunea fontului: 0; fundal: #FF9B00; ) .example-wrapper5 .text1 (afișare: bloc inline; dimensiunea fontului: 14px; înălțimea liniei: 1.5; aliniere verticală: mijloc; fundal: #FFFAF2; culoare: #FF9B00; aliniere text: centru; )

Blocul de înveliș trebuie să aibă setat „dimensiunea fontului: 0”. Dacă nu setați dimensiunea fontului la zero, browserul va adăuga câțiva pixeli în plus. De asemenea, va trebui să specificați dimensiunea fontului și înălțimea liniei pentru blocul interior, deoarece aceste proprietăți sunt moștenite de la părinte.

Alinierea verticală în tabele

Proprietatea „vertical-align” afectează și celulele tabelului. Cu valoarea setată la „mijloc”, conținutul din interiorul celulei este aliniat la centru. Desigur, aspectul tabelului este considerat arhaic în zilele noastre, dar în cazuri excepționale îl puteți simula prin specificarea „display: table-cell”.

De obicei folosesc această opțiune pentru alinierea verticală. Mai jos este un exemplu de layout luat dintr-un proiect finalizat. Poza care este centrată vertical în acest fel este cea care interesează.

.one_product .img_wrapper ( afișare : table-cell ; înălțime : 169 px ; vertical-align : middle ; overflow : ascuns ; fundal : #fff ; lățime : 255 px ; ) .one_product img ( înălțime maximă : 169 px ; lățime maximă : 100 %; lățime minimă: 140 px; afișare: bloc; marjă: 0 automat; )

Trebuie amintit că, dacă un element are un set „float” altul decât „none”, atunci va fi în orice caz bloc (afișare: bloc) - atunci va trebui să utilizați un înveliș suplimentar de bloc.

Alinierea cu un element suplimentar în linie

Și pentru elementele inline puteți folosi „vertical-align: middle”. Acest lucru va alinia toate elementele cu „display: inline” care sunt pe aceeași linie în raport cu o linie centrală comună.

Trebuie să creați un bloc auxiliar cu o înălțime egală cu înălțimea blocului părinte, apoi blocul dorit va fi centrat. Pentru a face acest lucru, este convenabil să folosiți pseudo-elementele:before sau:after.

.example-wrapper6 (înălțime: 300px; text-align: center; fundal: #70DAF1; ) .pudge (afișare: inline-block; vertical-align: middle; fundal: url(pudge.png) ; fundal-culoare: # fff ; lățime : 200 px ; înălțime : 200 px ; ) .riki ( afișare : bloc inline ; înălțime : 100 % ; aliniere verticală : mijloc ; ) Afișare: flexibilitate și aliniere

Dacă nu vă pasă foarte mult de utilizatorii Explorer 8 sau vă pasă atât de mult încât sunteți dispus să introduceți o bucată de javascript suplimentar pentru ei, atunci puteți folosi „display: flex”. Cutiile flexibile sunt excelente pentru a rezolva problemele de aliniere și scrieți doar „margin: auto” pentru a centra conținutul în interior.

Până acum, practic nu am întâlnit niciodată această metodă, dar nu există restricții speciale pentru ea.

.example-wrapper7 ( display : flex ; înălțime : 300px ; fundal : #AEB96A ; ) .example-wrapper7 img ( margine : automat ; )

Ei bine, atât am vrut să scriu despre alinierea CSS. Acum centrarea conținutului nu va fi o problemă!

Foarte des în aspect este necesară centrarea unui element orizontal și/sau vertical. Prin urmare, am decis să fac un articol cu moduri diferite de centrare, astfel încât totul să fie la îndemână într-un singur loc.

Marja de aliniere orizontală: automată

Alinierea orizontală folosind marginea este utilizată atunci când lățimea elementului centrat este cunoscută. Lucrări pentru elemente de bloc:

Element ( margine-stânga: automat; margine-dreapta: automat; lățime: 50%; )

Specificarea automată pentru marginile din dreapta și din stânga le face egale, ceea ce centrează elementul orizontal în blocul părinte.

text-align: centru

Această metodă este potrivită pentru centrarea textului într-un bloc. text-align: center:

Aliniere cu text-align .wrapper ( text-align: center; )

Sunt aliniat la centru

poziție și marja negativă stângă

Potrivit pentru centrarea blocurilor de lățime cunoscută. Oferim poziția blocului părinte: relativ la poziția relativă la acesta, poziția elementului centrat: absolut , stânga: 50% și o marjă negativă-stânga a cărei valoare este egală cu jumătate din lățimea elementului:

Aliniere cu poziția .wrapper ( poziție: relativ; ) .wrapper p ( stânga: 50%; marjă: 0 0 0 -100px; poziție: absolut; lățime: 200px; )

Sunt aliniat la centru

display: inline-block + text-align: center

Metoda este potrivită pentru alinierea blocurilor de lățime necunoscută, dar necesită un părinte de ambalare. De exemplu, puteți centra un meniu orizontal astfel:

Aliniere cu afișaj: inline-block + text-align: center; .navigation ( text-align: center; ) .navigation li ( display: inline-block; )

Linie de aliniere verticală-înălțime

Pentru a alinia o linie de text, puteți utiliza aceleași valori de înălțime și spațiere între rânduri pentru blocul părinte. Potrivit pentru butoane, elemente de meniu etc.

line-height .wrapper ( înălțime: 100px; line-height: 100px; )

Sunt aliniat vertical

poziție și marja negativă în sus

Un element poate fi aliniat vertical dându-i o înălțime fixă și aplicând o poziție: absolută și o marjă negativă în sus egală cu jumătate din înălțimea elementului aliniat. Blocului părinte trebuie să i se atribuie poziția: relativă:

Wrapper ( poziție: relativă; ) elem ( înălțime: 200px; margine: -100px 0 0; poziție: absolut; sus: 50%; )

Astfel, folosind poziţionarea şi marginile negative, puteţi centra un element pe pagină.

afișare: tabel-celulă

Pentru alinierea verticală, proprietatea display: table-cell este aplicată elementului, ceea ce îl forțează să emuleze o celulă de tabel. De asemenea, îi setăm înălțimea și alinierea verticală: mijloc . Să înfășurăm toate acestea într-un container cu dislpay: table; property. :

Afișare aliniere verticală: table-cell .wrapper ( afișare: tabel; lățime: 100%; ) .cell ( afișare: table-cell; înălțime: 100px; vertical-align: middle; )

Sunt aliniat vertical

Alinierea dinamică a unui element pe o pagină

Am analizat modalități de a alinia elemente pe o pagină folosind CSS. Acum să aruncăm o privire la implementarea jQuery.

Să conectăm jQuery la pagină:

Vă sugerez să scrieți o funcție simplă pentru a centra un element pe pagină, să-l numim alignCenter() . Elementul în sine acționează ca un argument al funcției:

Funcția alignCenter(elem) ( // codează aici )

În corpul funcției, calculăm dinamic și atribuim coordonatele centrului paginii proprietăților CSS din stânga și de sus:

Funcția alignCenter(elem) ( elem.css(( stânga: ($(window).width() - elem.width()) / 2 + "px", sus: ($(window).height() - elem. height()) / 2 + "px" // nu uitați să adăugați poziție: absolută elementului pentru a declanșa coordonatele )) )

În prima linie a funcției, obținem lățimea documentului și scădem din el lățimea elementului, împărțit la jumătate - acesta va fi centrul orizontal al paginii. A doua linie face același lucru, doar cu înălțimea pentru alinierea verticală.

Funcția este gata, tot ce rămâne este să o atașați la evenimentele de pregătire DOM și de redimensionare a ferestrei:

$(function() ( // apelează funcția de centrare când DOM-ul este gata alignCenter($(elem)); // apelează funcția când redimensionează fereastra $(window).resize(function() ( alignCenter($(elem) )); )) // funcția de centrare a elementului alignCenter(elem) ( elem.css(( // se calculează coordonatele din stânga și sus din stânga: ($(window).width() - elem.width()) / 2 + " px", sus: ($(window).height() - elem.height()) / 2 + "px" )) ) ))

Aplicarea Flexbox

Noile funcții CSS3, cum ar fi Flexbox, devin treptat obișnuite. Tehnologia ajută la crearea de markup fără a utiliza floats, poziționare etc. Poate fi folosit și pentru centrarea elementelor. De exemplu, aplicați Flexbox elementului părinte.wrapper și centrați conținutul în interior:

Wrapper ( display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; înălțime: 500px; lățime: 500px; ) .wrapper .conținut ( marja: auto; /* margine: 0 auto; numai orizontală */ /* margine: auto 0; doar verticală */ ) Lorem ipsum dolor sit amet

Această regulă centrează elementul orizontal și vertical în același timp - marginea funcționează acum nu numai pentru alinierea orizontală, ci și pentru cea verticală. Și fără o lățime/înălțime cunoscută.

Resurse aferente Ajută proiectul

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ă așa crezi, 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.:

Avantajele aspectului folosind o etichetă

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.

Ajutoare pentru poziționare

Î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 redusă în dimensiune, 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.

Straturi de centrare

Î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; marjă: 0 automat; ) #stânga ( lățime: 200px; înălțime: 100px; float: stânga; fundal: rgb(255,51,102); ) #dreapta ( lățime: 200px; înălțime: 100px; float : stânga; fundal: rgb(0,255,153); ) #center ( lățime: 200px; înălțime: 100px; float: stânga; fundal: rgb(255,0,0); ) Bloc din stânga Bloc central Bloc din dreapta

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.

Cum se face o legătură dintr-un strat

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%.

Ascunderea și afișarea elementelor de bloc

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 acesta, se va ascunde sau se va 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).

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 a afișa stratul.

Toți cei care se ocupă de layout mai devreme sau mai târziu se confruntă cu nevoia de a alinia elementele pe verticală... și știu ce dificultăți pot apărea la alinierea unui element la centru. În CSS există o proprietate `vertical-align` cu multe valori care, în mod logic, ar trebui să efectueze alinierea verticală. Cu toate acestea, în practică, nu funcționează deloc așa cum era de așteptat.

Există mai multe tehnici pentru a rezolva această problemă. Mai jos vom arunca o privire mai atentă asupra fiecăruia dintre ele.

1. Alinierea folosind un tabel

În acest caz, înlocuim blocul exterior cu un tabel cu o singură celulă. Alinierea va fi aplicată conținutului celulei, adică blocului interior.

HTML

CSS

Exterior ( lățime : 200 px ; înălțime : 200 px ; text-align : centru ; vertical-align : mijloc ; culoare de fundal : #ffc ; )

Principalul dezavantaj al acestei soluții, din punct de vedere semantic, este utilizarea tabelului în alte scopuri decât scopul propus. Al doilea dezavantaj este că crearea unui tabel necesită adăugarea unui alt element în jurul blocului exterior.

Primul dezavantaj poate fi parțial evitat prin înlocuirea etichetelor de tabel cu div-uri și setarea modului de afișare a tabelului în CSS.

HTML

CSS

Outer-wrapper ( display : table ; ) .outer ( display : table-cell ; )

2. Alinierea folosind indentări

Cu condiția să cunoaștem înălțimile blocurilor interioare și exterioare, alinierea poate fi stabilită folosind indentările verticale ale blocului interior folosind formula: (H exterior – H interior) / 2.

CSS

Exterior ( înălțime : 200 px ; ) . interior ( înălțime : 100 px ; margine : 50 px 0 ; )

Dezavantajul soluției este cunoașterea obligatorie a înălțimii ambelor blocuri.

3. Alinierea folosind înălțimea liniei

Dacă blocul interior nu ocupă mai mult de un rând de text, atunci puteți utiliza proprietatea line-height și o puteți seta egală cu înălțimea blocului exterior. Deoarece conținutul blocului interior nu trebuie să se încadreze la a doua linie, este recomandabil să adăugați și spațiul alb: nowrap și overflow: reguli ascunse.

CSS

Exterior ( înălțime : 200 px ; înălțime linie : 200 px ; ) . interior ( spațiu alb : nowrap ; overflow : ascuns ; )

Această metodă poate fi folosită și pentru a alinia textul cu mai multe linii. Pentru a face acest lucru, blocul interior trebuie să suprascrie valoarea înălțimii liniei și, de asemenea, să adauge afișajul: inline-block și vertical-align: middle rules.

CSS

Exterior ( înălțime : 200 px ; înălțime linie : 200 px ; ) . interior ( înălțime linie : normal ; afișare : bloc inline ; aliniere verticală : mijloc ; )

Dezavantajul acestei metode este că trebuie cunoscută înălțimea blocului exterior.

4. Alinierea folosind „întindere”

Această metodă poate fi folosită atunci când înălțimea blocului intern ne este cunoscută, dar cea externă nu.

Pentru a aplica această metodă avem nevoie de:

Setați blocul exterior în poziția de poziționare relativă: relativă, iar blocul interior în poziția absolută: absolută;
Adăugați mai multe reguli de sus: 0 și de jos: 0 la blocul interior, drept urmare se va întinde pe toată înălțimea blocului exterior;
Setați umplutura verticală a blocului intern la automat.

CSS

Exterior ( poziție : relativă ; ) . interior ( înălțime : 100 px ; poziție : absolută ; sus : 0 ; jos : 0 ; margine : auto 0 ; )

5. Alinierea cu marginea negativă-sus

Similar cu cea precedentă, această metodă este utilizată atunci când înălțimea blocului extern este necunoscută, dar este cunoscută înălțimea blocului intern.

Trebuie să setați blocul extern la poziționare relativă, iar blocul intern la poziționare absolută. Apoi mutați blocul interior în jos cu jumătate din înălțimea superioară a blocului exterior: 50% și ridicați-l cu jumătate de înălțime margine-top: -Hinner / 2 .

CSS

Exterior ( poziție : relativă ; ) . interior ( înălțime : 100 px ; poziție : absolut ; sus : 50 % ; margine-sus : -50 px ; )

Dezavantajul acestei metode este că trebuie cunoscută înălțimea unității interioare.

6. Alinierea folosind transformarea

Metoda poate fi utilizată atunci când înălțimea unității interioare este necunoscută. Trebuie să mutați blocul interior în jos cu jumătate din înălțimea de sus a blocului exterior: 50%, apoi utilizați proprietatea de transformare și mutați-l înapoi în sus folosind funcția translateY(-50%).

CSS

Exterior ( poziție : relativ ; ) .intern ( poziție : absolut ; top : 50% ; transform : translateY (-50% ); )

7. Alinierea cu un pseudo-element

Aceasta este metoda cea mai universală care poate fi utilizată atunci când înălțimile ambelor blocuri sunt necunoscute.

Esența metodei este să adăugați un bloc inline cu o înălțime de 100% în interiorul blocului exterior și să îi atribuiți o aliniere verticală. Astfel, înălțimea blocului adăugat va fi egală cu înălțimea blocului exterior. Blocul interior va fi aliniat vertical față de cel adăugat, și deci blocul exterior.

Pentru a nu încălca semantica, este recomandabil să adăugați un bloc inline folosind pseudoelementele înainte sau după.

CSS

Exterior : înainte ( afișare : bloc în linie ; înălțime : 100 % ; aliniere verticală : mijloc ; conținut : „” ; ) . interior ( afișare : bloc în linie ; aliniere verticală : mijloc ; )

Dezavantajul acestei metode este că nu poate fi utilizată cu poziționarea absolută a unității interioare.

8. Alinierea cu Flexbox

Cel mai modern mod de aliniere verticală este utilizarea Flexible Box Layout (sau Flexbox pe scurt). Vă permite să controlați în mod flexibil poziționarea elementelor pe pagină, aranjandu-le aproape oriunde. Alinierea la centru pentru Flexbox este o sarcină foarte simplă.

Problema centrerii verticale a elementelor în CSS are o serie de soluții gata făcute. Alegerea metodei de aliniere în fiecare caz individual depinde de tipul, dimensiunea, poziționarea elementelor și alte proprietăți specificate pentru acestea.

Mai jos sunt câteva tehnici populare de aliniere verticală printre designerii de layout. Arată cum funcționează și pentru ce cazuri fiecare dintre ele este cel mai potrivit.

Iată două elemente div:

Fiecare metodă va fi utilizată pentru a alinia unitatea interioară cu centrul unității exterioare.

înălțimea liniei pentru o linie

Când părintele ocupă un rând de text și se cunoaște înălțimea copilului, se poate aplica proprietatea line-height. Valoarea proprietății trebuie să fie egală cu înălțimea blocului exterior. Acest lucru funcționează doar pentru o singură linie, așa că este util să adăugați overflow: ascuns și spațiu alb: nowrap pentru copil.

Nu se va putea folosi notația procentuală line-height=100%, deoarece 100% în acest caz este înălțimea fontului.

Container (
înălțime: 300px;
înălțimea liniei: 300px;
}

interior (
spatiu alb: nowrap;
preaplin: ascuns;
}

Metoda este aplicabilă numai dacă se cunoaște înălțimea blocului exterior.

Tabel cu aliniere verticală

O masă este ideală pentru alinierea verticală a elementelor. Pentru a nu încălca semantica, este mai bine să creați elemente de tabel folosind CSS. Poziția conținutului celulei este controlată de vertical-align. Există patru valori pentru această proprietate în tabele:

Linie de bază - implicit;
. jos — conținut în partea de jos a celulei;
. mijloc — conținut în mijlocul celulei;
. top — conținut din partea de sus a celulei.

În primul exemplu, o singură celulă de tabel devine blocul exterior.

Container (
afisare: tabel-celula;
vertical-align: mijloc;
}

Lucrul bun la această metodă este că funcționează pentru elemente fără o înălțime dată, dar în unele cazuri utilizarea sa este îngreunată de faptul că blocul exterior, ca orice celulă de tabel, își ajustează lățimea la conținutul său și îl poți întinde. numai prin setarea explicită a lățimii pentru lățime. Pentru o celulă fără tabel, procentele nu funcționează adecvat.

Acest neajuns este corectat prin împachetarea celulei în părinte cu proprietatea display:table. Mărimea acestui element poate fi setată ca procent. Codul final va arăta astfel:

Înveliș exterior (
afisare: tabel;
}

Container (
afisare: tabel-celula;
vertical-align: mijloc;
}

Poziție: absolută + marjă negativă

Metoda este utilizată atunci când se cunoaște înălțimea elementului intern. Poate fi necunoscut de unitatea externă. Părintelui i se oferă o poziție relativă, iar copilului din interiorul acestuia i se oferă o poziție absolută.

O valoare a proprietății superioare de 50% face ca elementul imbricat să fie poziționat cu marginea superioară în mijlocul blocului exterior. Tot ce rămâne este să-și ridice marginea negativă la jumătate din înălțimea proprie, astfel încât să stea exact în centrul verticalei.

Container (
poziție: relativă;
}

interior (
inaltime: 140px;
poziție: absolută;
sus: 50%;
margine-top: -70px;
}

Dezavantajul acestei metode este necesitatea de a cunoaste inaltimea copilului.

Alinierea în linie cu vertical-align

Alinierea elementelor inline și inline-block, inclusiv imagini și pictograme, în textul din jur este realizată prin proprietatea vertical-align. Spre deosebire de un tabel, în acest caz funcționează întregul set de valori specificate în caietul de sarcini.

Dacă înălțimea părintelui este cunoscută, această proprietate poate fi folosită pentru a centra textul cu mai multe linii.

Pentru blocul exterior, este prescrisă centrarea unei linii.

Container (
inaltime: 140px;
înălțimea liniei: 140px;
}

Valoarea înălțimii liniei pentru blocul interior este redefinită la normal sau la orice valoare dorită. De asemenea, i se oferă alinierea vertical-align: middle și conversia la un tip de bloc inline - afișare: bloc inline.

interior (
display: inline-block;
înălțimea liniei: normală;
vertical-align: mijloc;
}

Dezavantajul acestei metode este că trebuie să cunoașteți înălțimea părintelui.

Alinierea cu transformarea

Funcția translateY a proprietății transform vă permite să centrați un bloc interior de înălțime necunoscută. Pentru a face acest lucru, părintele trebuie poziționat relativ, iar copilul absolut.

Proprietatea de sus cu o valoare de 50% coboară blocul interior, astfel încât marginea sa superioară să fie poziționată în mijlocul părintei. Valoarea translateY: -50% ridică elementul la jumătate din înălțimea proprie și astfel aliniază centrele verticale ale blocurilor.

Container (
poziție: relativă;
}

interior (
poziție: absolută;
sus: 50%;
transforma: translateY(-50%);
}

Dezavantajul acestei tehnici este suportul limitat pentru funcțiile de transformare din browserul IE.

Aliniere prin pseudo-element

Metoda funcționează atunci când înălțimea nu este cunoscută nici pentru primul, nici pentru al doilea bloc. Un pseudo-element de bloc inline este adăugat în interiorul părinte folosind înainte sau după. Înălțimea elementului adăugat trebuie să fie egală cu înălțimea părintelui - înălțime: 100%. Alinierea verticală a conținutului este setată folosind vertical-align: middle.

Folosind vertical-align: middle, blocul interior este aliniat relativ la acest pseudo-element. Deoarece părintele și copilul au aceeași înălțime, elementul interior, deși este aliniat vertical cu pseudo-elementul, este de asemenea centrat cu caseta exterioară.

Container: înainte de (
continut: "";
inaltime: 100%;
vertical-align: mijloc;
display: inline-block;
}

interior (
display: inline-block;
vertical-align: mijloc;
}

Mod universal. Nu funcționează dacă unitatea interioară este setată pe poziție absolută.

Flexbox

Cel mai nou și mai ușor mod de a alinia elementele pe verticală. Flexbox vă permite să aranjați elementele unei pagini Web după cum doriți. Pentru a centra un bloc, trebuie doar să setați afișaj: flex pentru părinte și margine: auto pentru copil.

Container (
display: flex;
lățime: 320px;
inaltime: 140px;
}

interior (
latime: 120px;
margine: auto;
}

Flexbox funcționează numai în browserele moderne.

Alegerea unei metode

Ce tehnică de aliniere verticală să utilizați depinde de sarcină și de limitările care pot fi prezente în orice caz particular.

Înălțimea elementelor este necunoscută

În această situație, puteți utiliza una dintre cele patru metode universale:

1. Tabelul. Părintele devine o celulă de tabel creată în HTML sau prin display-table/display-cell. Acest element părinte este dat vertical-align: middle.

2. Pseudo-element. Pentru blocul exterior, un pseudo-element de bloc inline este creat cu width=100% și vertical-align: middle. Copilului i se oferă afișare: bloc inline și aliniere verticală: mijloc. Metoda nu funcționează numai atunci când blocului intern i se oferă o poziționare absolută.

3. Transformă. Părintele capătă poziție: rudă. Copilului i se dă poziția: absolut, top: 50% și transform: translateY(-50%);

4. Flexbox. Blocul exterior este setat să afișeze: flex, blocul interior este setat la margine: auto.

Se cunoaște doar înălțimea copilului

Unitatea externă este poziționată relativ; Elementului interior i se dă o poziționare absolută, de sus: 50% și o marjă de sus egală cu jumătate din înălțimea sa.

O linie pe bloc cu înălțime cunoscută

Blocului exterior i se dă o proprietate line-height cu o valoare egală cu înălțimea sa.

Înălțimea blocului exterior este cunoscută, dar elementul interior nu.

Părintele primește o înălțime de linie egală cu înălțimea sa. Înălțimea liniei copilului este redefinită la normal sau la orice valoare dorită și îi sunt date: inline-block și vertical-align: middle.