Alinierea orizontală și verticală a elementelor. aliniere verticală în div

Adesea, la așezare, este nevoie de alinierea verticală a textului într-un bloc. Dacă acest lucru trebuie făcut într-o celulă de tabel, atunci valoarea proprietății CSS de aliniere verticală este setată.

Dar apare o întrebare rezonabilă, este posibil să faci fără un tabel, fără a supraîncărca marcajul paginii cu etichete inutile? Răspunsul este „puteți”, dar din cauza suportului slab CSS în MSIE, soluția la problemă va diferi de soluția pentru alte browsere comune.

Ca exemplu, luați în considerare următorul fragment:

și încercați să aliniați vertical textul la centrul casetei și la partea de jos a casetei.

Rezolvarea problemei

Browsere „adecvate” (inclusiv MSIE

Majoritatea browserelor moderne acceptă CSS2.1, și anume valoarea tabel-celulă pentru proprietatea de afișare. Acest lucru ne oferă posibilitatea de a forța blocul cu text să fie afișat ca o celulă de tabel și, folosind aceasta, aliniați textul pe verticală:

div (
display:tabel-celula;
vertical-align: mijloc;
}

div (
display:tabel-celula;
vertical-align: fund;
}

Internet Explorer (până la versiunea 7 inclusiv)

Pentru a rezolva problema alinierii textului la partea de jos a unui bloc în MSIE, puteți utiliza poziționarea absolută (aici avem nevoie de un element inline imbricat într-un bloc):

div (
poziție: relativă;
}
div span(
display:bloc;
poziție: absolută;
jos: 0%;
stânga: 0%
latime: 100%
}

Acest set de reguli funcționează și în browserele „corecte”.

Specificați proprietăți

interval div (
display:bloc;
latime: 100%
}

nu sunt necesare, dar pot fi necesare dacă intenționați să utilizați alinierea orizontală a textului pe lângă alinierea verticală a textului, de exemplu, text-align: center ;.

Pentru a alinia vertical textul în centrul blocului, fragmentul original va trebui în continuare complicat - să introducem încă un element inline:

Material pentru studiu:

• Centrare verticală în CSS (www.jakpsatweb.cz/css/css-vertical-center-solution.html)
• Centrare verticală folosind CSS (www.student.oulu.fi/%7Elaurirai/www/css/middle/)
• Aliniere verticală (www.cssplay.co.uk/ie/valign.html)
• vertical-align:middle (cssing.org.ua/2005/07/14/vertical-align-middle/)
• O altă modalitate de a alinia vertical în CSS (cssing.org.ua/2007/04/26/another-css-valign-method)

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

Aliniere orizontala

margine: auto

Alinierea orizontală cu margine 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 valorii automate a umpluturii 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:

poziție și marja negativă la stânga

Potrivit pentru blocuri centrate de lățime cunoscută. Setăm blocul părinte la poziție: relativ la poziția relativ la acesta, elementul centrat la poziție: absolute , left: 50% și o margine negativă-left , a cărei valoare este egală cu jumătate din lățimea elementului:

display: inline-block + text-align: center

Metoda este potrivită pentru alinierea blocurilor de lățime necunoscută, dar necesită un înveliș părinte. De exemplu, iată cum puteți centra un meniu orizontal:

• Acasă
• Despre autor

Aliniere verticală

inaltimea liniei

Pentru a alinia o singură 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.

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 ar trebui 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 elementul pe pagină.

afișare: tabel-celulă

Pentru alinierea verticală, proprietatea display: table-cell este aplicată elementului, ceea ce îl face să emuleze o celulă de tabel. De asemenea, setăm înălțimea și alinierea verticală: la mijloc. Toate acestea le vom împacheta într-un container cu proprietatea dislpay: table; :

Aliniați dinamic un 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ă adăugă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, calculați dinamic și atribuiți 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 la fel, doar cu o înălțime de aliniat vertical.

Funcția este gata, rămâne să o atârnăm pe pregătirea DOM și evenimentele de redimensionare a ferestrei:

$(function() ( // apelează funcția de centrare când DOM-ul este gata alignCenter($(elem)); // apelează funcția când fereastra este redimensionată $(window).resize(function() ( alignCenter($() elem)); )) // funcția de centrare a elementelor alignCenter(elem) ( elem.css(( // calcularea coordonatelor stânga și sus 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, intră încet în curentul principal. Tehnologia ajută la crearea de markup fără utilizarea flotoarelor, poziționării etc. Poate fi folosit și pentru centrarea elementelor. De exemplu, să aplicăm Flexbox elementului părinte .wrapper și să centrem 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: automat; /* margine: 0 automat; numai orizontală */ /* margine: automat 0; numai verticală */ )

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

Resurse conexe

Ajută proiectul

Centrarea elementelor pe verticală cu CSS este o provocare pentru dezvoltatori. Cu toate acestea, există mai multe metode de rezolvare, care sunt destul de simple. Această lecție prezintă 6 opțiuni pentru centrarea verticală a conținutului.

Să începem cu o descriere generală a problemei.

Problemă de centrare pe verticală

Centrarea orizontală este foarte simplă și ușoară. Când elementul centrat este inline, utilizați proprietatea de aliniere relativă la elementul părinte. Când elementul este blocat - setați-i lățimea și setați automat marginile din stânga și din dreapta.

Majoritatea oamenilor, când folosesc proprietatea text-align:, se referă la proprietatea vertical-align pentru centrarea verticală. Totul pare destul de logic. Dacă ați folosit șabloane de tabel, probabil că ați folosit extensiv atributul valign, ceea ce întărește credința că alinierea verticală este calea corectă.

Dar atributul valign funcționează numai pe celulele tabelului. Și proprietatea de aliniere verticală este foarte asemănătoare. De asemenea, afectează celulele tabelului și unele elemente inline.

Valoarea proprietății de aliniere verticală este relativă la elementul inline părinte.

• Într-o linie de text, alinierea este relativă la înălțimea liniei.
• Celula tabelului folosește alinierea în raport cu valoarea calculată printr-un algoritm special (de obicei se obține înălțimea liniei).

Dar, din păcate, proprietatea de aliniere verticală nu funcționează pe elementele la nivel de bloc (cum ar fi paragrafele din interiorul unui element div). Această situație poate duce la ideea că nu există o soluție la problema alinierii verticale.

Dar există și alte metode de centrare a elementelor la nivel de bloc, a căror alegere depinde de ceea ce este centrat în raport cu containerul exterior.

metoda înălțimii liniei

Această metodă funcționează atunci când doriți să centrați vertical o linie de text. Tot ce trebuie să faceți este să setați înălțimea liniei să fie mai mare decât dimensiunea fontului.

În mod implicit, spațiul liber va fi distribuit uniform deasupra și sub text. Și linia va fi centrată vertical. Adesea, înălțimea liniei este egală cu înălțimea elementului.

HTML:

CSS:

#copil (înălțimea liniei: 200px; )

Această metodă funcționează în toate browserele, deși poate fi folosită doar pentru o singură linie. Valoarea de 200 px din exemplu este aleasă în mod arbitrar. Puteți utiliza orice valoare mai mare decât dimensiunea fontului textului.

Centrarea unei imagini cu înălțimea liniei

Ce se întâmplă dacă conținutul este o imagine? Va funcționa metoda de mai sus? Răspunsul se află într-o altă linie de cod CSS.

HTML:

CSS:

#parent ( line-height: 200px; ) #parent img ( vertical-align: middle; )

Valoarea proprietății line-height trebuie să fie mai mare decât înălțimea imaginii.

Metoda tabelului CSS

După cum am menționat mai sus, proprietatea de aliniere verticală se aplică celulelor tabelului, unde funcționează excelent. Putem reda elementul nostru ca o celulă de tabel și să folosim proprietatea vertical-align pe ea pentru a centra conținutul pe verticală.

Notă: Un tabel CSS nu este același lucru cu un tabel HTML.

HTML:

CSS:

#părinte (afișare: tabel;) #copil (afișare: tabel-celulă; vertical-align: mijloc; )

Setăm rezultatul tabelului la div-ul părinte și redăm div-ul imbricat ca o celulă de tabel. Acum puteți utiliza proprietatea de aliniere verticală pe containerul interior. Totul din el va fi centrat vertical.

Spre deosebire de metoda de mai sus, în acest caz conținutul poate fi dinamic, deoarece elementul div se va redimensiona pentru a se potrivi cu conținutul său.

Dezavantajul acestei metode este că nu funcționează în versiunile mai vechi de IE. Trebuie să utilizați proprietatea display: inline-block pentru containerul imbricat.

Poziționare absolută și marje negative

Această metodă funcționează și în toate browserele. Dar necesită ca elementului centrat să i se dea o înălțime.

Exemplul de cod face atât centrarea orizontală, cât și verticală în același timp:

HTML:

CSS:

#părinte (poziție: relativ;) #copil (poziția: absolut; sus: 50%; stânga: 50%; înălțime: 30%; lățime: 50%; marjă: -15% 0 0 -25%; )

Mai întâi, setăm tipul de poziționare al elementelor. Apoi, pe div imbricat, setați proprietățile de sus și stânga la 50%, care este centrul elementului părinte. Dar colțul din stânga sus al elementului imbricat devine centrat. Prin urmare, trebuie să îl ridicați (jumătate din înălțime) și să îl mutați la stânga (jumătate din lățime), iar apoi centrul va coincide cu centrul elementului părinte. Deci, cunoașterea înălțimii elementului este necesară în acest caz. Apoi dăm elementului marginile de sus și stânga negative egale cu jumătate din înălțime și, respectiv, lățime.

Această metodă nu funcționează în toate browserele.

Poziționare și întindere absolută

Exemplul de cod realizează centrarea verticală și orizontală.

HTML:

CSS:

#părinte (poziție: relativă;) #copil (poziția: absolut; sus: 0; jos: 0; stânga: 0; dreapta: 0; lățime: 50%; înălțime: 30%; margine: auto; )

Ideea din spatele acestei metode este de a întinde elementul imbricat la toate cele 4 granițe ale elementului părinte setând proprietățile de sus, jos, dreapta și stânga la 0.

Setarea marginilor de pe toate părțile la automat va seta valorile pe toate cele 4 laturi să fie egale și va aduce elementul nostru div imbricat în centrul elementului părinte.

Din păcate, această metodă nu funcționează în IE7 și mai jos.

Umplutură egală sus și jos

Această metodă setează în mod explicit umplutură egală deasupra și sub elementul părinte.

HTML:

CSS:

#părinte ( umplutură: 5% 0; ) #copil ( umplutură: 10% 0; )

În codul CSS pentru exemplu, umplutura de sus și de jos este setată pentru ambele elemente. Pentru un element imbricat, setarea căptușelii va servi pentru a-l centra vertical. Și umplutura elementului părinte va centra elementul imbricat în el.

Unitățile relative sunt folosite pentru a redimensiona dinamic elementele. Iar pentru unitățile de măsură absolute, va trebui să faceți calculele.

De exemplu, dacă elementul părinte are 400 px înălțime și elementul imbricat este 100 px înălțime, atunci este necesar 150 px de umplutură în partea de sus și de jos.

150 + 150 + 100 = 400

Utilizarea % permite ca calculele să fie lăsate în seama browserului.

Această metodă funcționează peste tot. Dezavantajul este nevoia de calcule.

Notă: Această metodă funcționează prin setarea marginii elementului. De asemenea, puteți utiliza margini în cadrul unui element. Decizia de a aplica marje sau umplutură ar trebui luată în funcție de specificul proiectului.

div plutitor

Această metodă folosește un element div gol, care plutește și ajută la controlul poziției elementului nostru imbricat în document. Rețineți că div-ul plutitor este plasat înaintea elementului nostru imbricat în codul HTML.

HTML:

CSS:

#părinte (înălțime: 250px;) #floater ( plutitor: stânga; înălțime: 50%; lățime: 100%; margine-jos: -50px; ) #copil (clar: ambele; înălțime: 100px; )

Compensam div-ul gol la stânga sau la dreapta și îi dăm o înălțime de 50% din elementul părinte. În acest fel, va umple jumătatea superioară a elementului părinte.

Deoarece acest div plutește, este eliminat din fluxul normal al documentului și trebuie să derulăm elementul imbricat. Exemplul folosește clear: both , dar este suficient să folosiți aceeași direcție ca decalajul elementului div vid plutitor.

Marginea de sus a elementului div imbricat este direct sub marginea de jos a elementului div gol. Trebuie să mutăm elementul imbricat în sus cu jumătate din înălțimea elementului gol plutitor. Pentru a rezolva problema, se folosește o valoare negativă a proprietății margin-bottom pentru un element div vid plutitor.

Această metodă funcționează și în toate browserele. Cu toate acestea, utilizarea acestuia necesită un element div gol suplimentar și cunoașterea înălțimii elementului imbricat.

Concluzie

Toate metodele descrise sunt ușor de utilizat. Dificultatea constă în faptul că niciuna dintre ele nu este potrivită pentru toate cazurile. Este necesar să analizați proiectul și să îl alegeți pe cel care se potrivește cel mai bine cerințelor.

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

Există mai multe tehnici pentru a rezolva această problemă. Să aruncăm o privire mai atentă la fiecare dintre ele mai jos.

1. Alinierea cu o masă

Î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 al semanticii, este că tabelul nu este utilizat în scopul propus. Al doilea dezavantaj este că pentru a crea un tabel, trebuie să adăugați încă un element în jurul blocului exterior.

Primul negativ poate fi anulat parțial 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 cu căptușeală

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 cu î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 ar trebui să meargă la a doua linie, este o idee bună 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, precum și să adauge regulile de afișare: inline-block și vertical-align: middle .

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 cu „întindere”

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

Pentru a aplica această metodă, avem nevoie de:

• Setați blocul exterior pe poziția: relativ , iar blocul interior pe poziția absolută: absolut ;
• Adăugați câteva 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 căptușeala verticală a blocului interior 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 folosită atunci când înălțimea blocului exterior este necunoscută, dar este cunoscută înălțimea celui interior.

Trebuie să setați blocul exterior pe poziționare relativă, iar blocul interior pe poziționare absolută. Apoi mutați cutia interioară în jos jumătate din înălțimea superioară a cutiei exterioare: 50% și mutați-o în sus jumătate din înălțimea propriei margini-sus: -H _interior / 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 cu transformarea

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

css

Exterior ( pozitie : relativ ; ) .intern ( pozitie : absolut ; top : 50% ; transform : translateY (-50% ); )

7. Alinierea cu pseudo-element

Aceasta este cea mai versatilă metodă care poate fi folosită 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ă îl setați la alinierea verticală. Astfel, înălțimea blocului adăugat va fi egală cu înălțimea blocului exterior. Blocul interior se va alinia vertical în raport cu cel adăugat și, prin urmare, blocul exterior.

Pentru a nu încălca semantica, este de dorit să adăugați un bloc inline folosind pseudo-elemente înainte sau după.

css

Exterior : înainte ( afișare : bloc inline ; î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 a alinia vertical este să utilizați Flexible Box Layout (sau abreviat Flexbox). Vă permite să controlați în mod flexibil poziționarea elementelor pe pagină, plasându-le aproape oriunde. Alinierea la centru pentru Flexbox este o sarcină foarte simplă.