Alinierea verticală în tabelul css. Marginile de jos și de sus sunt egale. Centrare în bloc de înălțime variabilă

Astăzi, dragă cititor, ne vom ocupa de problema alinierii verticale într-un bloc div.

Cel mai probabil știți deja despre existența unei minunate proprietăți CSS vertical-align.Și Dumnezeu însuși ne-a ordonat să folosim tocmai această proprietate pentru alinierea verticală (nu degeaba are un nume atât de explicit).

Formularea problemei: Trebuie să centrați conținutul unui bloc de înălțime variabilă față de verticală.

Acum să începem să rezolvăm problema.

Și așa, avem un bloc, înălțimea lui se poate schimba:

Primul lucru care vă vine în minte este să faceți următoarea simulare:

Există toate motivele să credem că fraza Blocați conținutul va fi aliniat la înălțimea centrală a containerului div.

Dar nu era acolo! Nu vom obține nicio aliniere centrală așteptată în acest fel. Și de ce? S-ar părea că totul este indicat corect. Se pare că aceasta este problema: proprietatea vertical-align poate fi folosit doar pentru a alinia conținutul celulelor tabelului sau pentru a alinia elemente în linie unul față de celălalt.

În ceea ce privește alinierea în interiorul unei celule de tabel, cred că totul este clar. Dar voi explica un alt caz cu elemente inline.

Alinierea verticală a elementelor inline

Să presupunem că aveți o linie de text care este împărțită de etichete de linie în părți:

Tu salută bucată text!

O etichetă inline este un container al cărui aspect nu are ca rezultat transferul conținutului linie nouă.

Acțiunea unei etichete de bloc face ca conținutul containerului să se înfășoare la o nouă linie.

- Acest eticheta bloc. Dacă închidem bucăți de text în blocuri

, atunci fiecare dintre ei va fi pe o linie nouă. Folosind eticheta , care, spre deosebire de

, este litere mici, containerele nu vor fi mutate pe o linie nouă, toate containerele va rămâne pe aceeași linie.

Container convenabil de utilizat atunci când specificați o parte a textului cu formatare specială (evidențierea acesteia cu o culoare, un font diferit etc.)

Pentru containere Aplicați următoarele proprietăți CSS:

#perviy( vertical-align:sub; ) #vtoroy( vertical-align:3px; ) #tretiy( vertical-align:-3px; )

Linia de text rezultată va arăta astfel:

Aceasta nu este altceva decât alinierea verticală a elementelor în linie și proprietate CSS vertical-align face față perfect acestei sarcini.

Ne-am distras puțin, acum ne întoarcem la sarcina noastră principală.

Alinierea verticală în containerul div

Indiferent de ce, pentru alinierea în containerul div vom folosi proprietatea vertical-align. După cum am spus deja, această proprietate poate fi folosit în cazul alinierii elementelor inline (am discutat acest caz în detaliu mai sus și nu este potrivit pentru noi pentru alinierea într-un container div); tot ce rămâne este să folosim faptul că vertical-align funcționează pentru celulele de tabel.

Cum putem folosi asta? Nu avem o masă, lucrăm cu un container div.

Ha, se dovedește a fi foarte simplu.

proprietate CSS afişa vă permite să transformați blocul nostru div într-o celulă de tabel, acest lucru se poate face ușor și natural:

Să presupunem că avem o clasă div aliniere text:

Pentru acest bloc specificăm următoarea proprietate CSS:

Textalign(afisare: tabel-celula; )

Această instrucțiune CSS va transforma în mod miraculos div-ul nostru într-o celulă de tabel, fără a o schimba vizual în vreun fel. Și pentru o celulă de tabel putem aplica proprietatea vertical-align complet și alinierea verticală dorită va funcționa.

Totuși, totul nu se poate termina atât de simplu. Avem un browser IE minunat. Nu știe să lucreze cu proprietatea afișare: tabel-celulă(Sugerez să citiți tabelul care ilustrează funcționalitatea acestei proprietăți CSS în diferite browsere de pe site-ul htmlbook.ru). Prin urmare, va trebui să recurgem la diverse trucuri.

Există multe modalități de a realiza alinierea într-un container div pentru toate browserele:

• Metodă folosind un container auxiliar suplimentar div
• Metoda folosind expresia. Este legat de un calcul complicat al înălțimii blocurilor. Nu puteți face acest lucru fără cunoștințe de JavaScript.
• Folosind proprietatea line-height. Această metodă este potrivită numai pentru alinierea verticală într-un bloc de înălțime cunoscută și, prin urmare, nu este aplicabilă în cazul general.
• Utilizarea decalajului de conținut absolut și relativ în cazul browserului IE. Această metodă mi se pare cea mai înțeleasă și simplă. În plus, este implementabil pentru un container div cu înălțime variabilă. Ne vom opri asupra ei mai detaliat.

După cum înțelegeți, trebuie doar să rezolvăm problema alinierii verticale în IE, asociată cu înțelegerea greșită a proprietății. afișare: tabel-celulă(nici IE6, nici IE7, nici IE8 nu este familiarizat cu această proprietate). Prin urmare, folosind comentariu condiționat Vom specifica diferite proprietăți CSS special pentru familia de browsere IE.

Comentariu condiționat

Tip constructie:

... Инструкции, действующие только в случае выполнения условия в квадратных скобках...

se numește comentariu condiționat (ai grijă, tipul comentariu condiționat trebuie să corespundă în totalitate exemplului dat, până la un spațiu).

Instrucțiunile conținute într-un astfel de comentariu condiționat vor fi executate numai dacă browserul interpretează acest cod, aparține familiei IE.

Astfel, folosind un comentariu condiționat, putem ascunde o bucată de cod din toate browserele, cu excepția IE.

Rezolvarea problemei

Din cauza acestui pătrunjel, va trebui să furnizăm codului nostru HTML două containere suplimentare. Iată cum va arăta blocul nostru de text:

Pentru containerul div de clasă aliniere text Proprietățile CSS sunt setate care își aliniază conținutul vertical pentru toate browserele normale (cu excepția IE, desigur):

Display: tabel-celula; vertical-align: mijloc;

Și încă două proprietăți care stabilesc lățimea și înălțimea blocului:

Latime: 500px; înălțime: 500px;

Acest lucru este suficient pentru a alinia conținutul containerului centrat față de verticală, în toate browserele cu excepția IE.

Acum începem să adăugăm proprietăți legate de aliniere pentru browsere din familia IE(pentru ei am folosit blocuri suplimentare divȘi span):

Referitor la etichetă divîn interiorul unui bloc de clasă aliniere text. Pentru a face acest lucru, trebuie să indicați mai întâi numele clasei și apoi, separate printr-un spațiu, eticheta la care accesăm.

Textalign div( poziție: absolut; sus: 50%; )

Acest design înseamnă: pentru toată lumea etichete divîn interiorul unui bloc cu o clasă aliniere text aplicați proprietățile enumerate.

În consecință, stilurile specificate pentru bloc aliniere text sunt modificate:

Aliniere text (afișare: tabel-celulă; aliniere verticală: mijloc; lățime: 500px; înălțime: 500px; poziție: relativă; )

Acum, punctul din stânga sus al blocului de text este mutat în jos cu 50%.

Pentru a explica ce se întâmplă, am desenat o ilustrație:

După cum puteți vedea din imagine, am făcut unele progrese. Dar asta nu este tot! Punctul din stânga sus al blocului galben sa deplasat cu 50% în jos, în raport cu blocul părinte (violet). Dar trebuie să fie la cincizeci la sută din înălțimea blocului violet. centrul blocului galben, nu punctul său din stânga sus.

Acum eticheta va intra în joc span iar el poziționare relativă:

Textalign span( poziție: relativă; sus: -50%; )

Astfel, am deplasat blocul galben în sus cu 50% din înălțimea lui, în raport cu poziția inițială. După cum înțelegeți, înălțimea blocului galben este egală cu înălțimea conținutului centrat. Iar ultima operațiune asupra containerului span a plasat conținutul nostru în mijlocul blocului violet. Ura!

Hai să trișăm puțin

În primul rând, trebuie să ascundem pătrunjelul din toate browserele normale și să-l deschidem pentru IE. Acest lucru se poate face, desigur, folosind un comentariu condiționat, nu degeaba ne-am familiarizat cu el:

Există o mică problemă. Dacă conținutul centrat este prea mare, atunci acest lucru duce la consecințe neplăcute: înălțime suplimentară defilare verticală.

Soluție pentru problemă: trebuie să adăugați o proprietate debordare: ascuns bloc aliniere text.

Cunoașteți proprietatea în detaliu revărsare posibil în .

Instrucțiunile CSS finale pentru bloc aliniere text are forma:

Textalign( afișare: tabel-celulă; aliniere verticală: mijloc; lățime: 500px; înălțime: 500px; poziție: relativă; depășire: ascuns; chenar: 1px negru; )

Scuze, am uitat să menționez unul punct important. Daca incerci setați înălțimea blocului de clasă aliniere text V procent , atunci ai nimic nu va funcționa.

Centrare în bloc de înălțime variabilă

Foarte des este nevoie de a seta înălțimea unui bloc de clasă aliniere text nu în pixeli, ci ca procent din înălțime bloc părinteși aliniați conținutul containerului div la mijloc.

Problema este că este imposibil să faci acest lucru pentru o celulă de tabel (dar blocul de clasă aliniere text se transformă exact într-o celulă de tabel, datorită proprietății display:table-cell).

În acest caz, trebuie să utilizați un bloc extern pentru care este specificată proprietatea CSS display:tabelși setați deja valoarea procentuală a înălțimii pentru aceasta. Apoi blocul s-a imbricat în el, cu directiva CSS display:table-cell, va moșteni cu plăcere înălțimea blocului părinte.

Pentru a implementa un bloc de înălțime variabilă în exemplul nostru, vom edita puțin CSS-ul:

La clasa aliniere text vom modifica valoarea proprietatii afişa Cu tabel-celula pe masași eliminați directiva de aliniere vertical-align: mijloc. Acum putem schimba în siguranță valoarea înălțimii de la 500 de pixeli la, de exemplu, 100%.

Deci proprietățile CSS pentru blocul de clasă aliniere text va arata asa:

Textalign( afișare: tabel; lățime: 500px; înălțime: 100%; poziție: relativă; depășire: ascuns; chenar: 1px negru; )

Tot ce rămâne este să implementezi centrarea conținutului. Pentru a face acest lucru, un container div imbricat într-un bloc de clasă aliniere text(acesta este același bloc galben din imagine), trebuie să setați proprietatea CSS display:table-cell, atunci va moșteni înălțimea de 100% din blocul părinte aliniere text(bloc violet). Și nimic nu ne va împiedica să aliniem conținutul containerului div imbricat în centru cu proprietatea vertical-align: mijloc.

Mai primim unul lista suplimentara Proprietăți CSS pentru bloc div cuibărit într-un container aliniere text.

Textalign div( afișare: celulă-tabel; aliniere verticală: mijloc; )

Acesta este tot trucul. Dacă doriți, puteți avea o înălțime variabilă cu conținutul centrat.

Pentru mai multe informații despre alinierea verticală a unui bloc de înălțime variabilă, consultați .

Centrarea elementelor pe verticală cu folosind CSS este o sarcină care prezintă unele dificultăți pentru dezvoltatori. Cu toate acestea, există mai multe metode de rezolvare, care sunt destul de simple. ÎN această lecție 6 variante prezentate centrare verticală conţinut.

Sa incepem cu descriere generala sarcini.

Problemă de centrare verticală

Centrarea orizontală este foarte simplă și ușoară. Când elementul centrat este inline, folosim proprietatea relativă de aliniere element părinte. Când elementul este la nivel de bloc, îi setăm lățimea și instalare automată marginile din stânga și din dreapta.

Majoritatea oamenilor folosesc proprietatea text-align: , accesați proprietatea vertical-align pentru a centra vertical. Totul pare destul de logic. Dacă ați folosit șabloane de tabel, probabil că ați folosit pe scară largă atributul valign, care întărește credința că alinierea verticală calea cea buna la rezolvarea problemei.

Dar atributul valign funcționează numai pe celulele tabelului. A proprietatea de aliniere verticală foarte asemănătoare cu el. 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 o valoare calculată printr-un algoritm special (de obicei, înălțimea rândului).

Dar, din păcate, proprietatea de aliniere verticală nu funcționează pe elementele la nivel de bloc (de exemplu, paragrafele din interiorul element div). Această situație poate face să se creadă că nu există o soluție la problema alinierii verticale.

Dar există și alte metode de centrare elemente de bloc, a cărui alegere depinde de ceea ce este centrat față de recipientul exterior.

Metoda linie-înălțime

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

Mod implicit spatiu liber vor fi distribuite uniform deasupra și dedesubtul textului. Ș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 200 px din exemplu a fost aleasă în mod arbitrar. Orice valoare poate fi folosită marime mai mare font text.

Centrarea unei imagini folosind Line-Height

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

S-a menționat mai sus că proprietatea vertical-align este folosită pentru celulele tabelului, unde funcționează excelent. Putem afișa elementul nostru ca o celulă de tabel și putem folosi proprietatea de aliniere verticală pentru a centra vertical conținutul.

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; )

Instalăm ieșire tabelară pentru elementul div părinte și afișați elementul div 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 își va schimba dimensiunea în funcție de 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 acorde o înălțime.

Exemplul de cod efectuează centrarea orizontală ș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 a elementului. Apoi, setăm proprietățile de sus și stânga ale elementului div imbricat la 50%, ceea ce corespunde centrului elementului părinte. Dar centrul este colțul din stânga sus al elementului imbricat. 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 este necesară cunoașterea înălțimii elementului în acest caz. Apoi setăm elementul cu margini negative de sus și stânga 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 efectuează 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 margini ale elementului părinte prin setarea proprietăților de sus, jos, dreapta și stânga la 0.

Setarea marjei pentru a genera automat pe toate părțile va seta valori egale pe toate cele 4 laturi și va centra elementul nostru div imbricat pe elementul său părinte.

Din pacate, aceasta metoda nu funcționează în IE7 și mai jos.

Spații egale deasupra și dedesubt

În această metodă, umplutura egală este setată în mod explicit deasupra și sub elementul părinte.

HTML:

CSS:

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

În cod Exemplu CSS Marginile de sus și de jos sunt setate 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.

Pentru a redimensiona dinamic elementele, utilizați unități relative măsurători. Iar pentru unitățile de măsură absolute va trebui să faci calcule.

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

150 + 150 + 100 = 400

Utilizarea % vă permite să lăsați calculele în seama browserului.

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

Notă: Această metodă funcționează prin setare marginile element. De asemenea, puteți utiliza margini în cadrul unui element. Decizia de a folosi margini sau padding trebuie 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 setăm înălțimea la 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ă desfacem textul pe elementul imbricat. Exemplul folosește clar: ambele , dar este suficient să folosiți aceeași direcție ca decalajul unui element div vid plutitor.

Marginea de sus a unui element div imbricat este direct sub marginea de jos a unui element div gol. Trebuie să mutăm elementul imbricat în sus cu jumătate din înălțimea elementului gol plutitor. Pentru a rezolva problema, utilizați o valoare negativă a proprietății marginii de jos 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 este că niciuna dintre ele nu este potrivită pentru toate cazurile. Trebuie să analizezi proiectul și să-l alegi pe cel care se potrivește cel mai bun mod conform cerinţelor.

Adesea, în timpul aspectului, 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 aspectul paginii cu etichete inutile? Răspuns: „poți”, dar din cauza unui sprijin slab browser CSS Pentru MSIE, soluția problemei va fi diferită 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 blocului și la marginea de jos a blocului.

Rezolvarea problemei

Browsere „corecte” (inclusiv MSIE

Majoritate browsere moderne suportă CSS2.1, și anume valoarea tabel-celulă pentru proprietăți de afișare. Acest lucru ne oferă posibilitatea de a forța un bloc de text să apară ca o celulă de tabel și, profitând de acest lucru, să aliniem textul pe verticală:

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

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

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

Puteți rezolva problema alinierii textului la marginea de jos a unui bloc în MSIE folosind poziționarea absolută (aici vom avea nevoie de un element șir încorporat într-un bloc):

div(
poziție: relativă;
}
interval div (
afisare: 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

Div span(
afisare: bloc;
latime: 100%;
}

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

Pentru a alinia vertical textul la centrul blocului, fragmentul original va trebui totuși complicat - vom introduce un alt element de linie:

Material de studiat:

• 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ă metodă de aliniere verticală în CSS (cssing.org.ua/2007/04/26/another-css-valign-method)

Toți cei care se ocupă mai devreme sau mai târziu cu aspectul 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 această decizie, din punct de vedere semantic, tabelul nu este folosit în scopul propus. Al doilea dezavantaj este că pentru a crea un tabel trebuie să adăugați un alt element în jur unitate externă.

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

Înveliș exterior ( 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 setată folosind margini verticale la blocul 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 intern nu ocupă mai mult de un rând de text, atunci puteți utiliza proprietatea înălțimii liniei si intreaba-l egală cu înălțimea bloc extern. Deoarece conținutul blocului interior nu ar trebui 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 folosită atunci când înălțimea blocului extern este necunoscută, dar este cunoscută înălțimea celui intern.

Trebuie să setați blocul extern la poziționare relativă, iar blocul intern la poziționare absolută. Apoi deplasați blocul interior în jos cu jumătate din înălțimea superioară a blocului exterior: 50% și ridicați-l la jumătate din înălțimea propriei margini de sus: -H _interior / 2 .

CSS

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

Minus aceasta metoda- 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

Acesta este cel mai mult metoda universala, 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ă îi atribuiți o aliniere verticală. Astfel, înălțimea blocului adăugat va fi egală cu înălțimea blocului exterior. Unitate interioară va fi aliniat vertical în raport cu blocul adăugat și, prin urmare, extern.

Pentru a evita ruperea semanticii, bloc de linie Este recomandabil să-l adăugați folosind pseudo-elemente î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 folosită când poziționare absolută Unitate interioară.

8. Alinierea cu Flexbox

Cel mai într-un mod modern alinierea verticală este să utilizați Flexible Box Layout (sau Flexbox). 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ă.

Proprietatea CSS vertical-align este responsabilă pentru alinierea verticală a textului și imaginilor de pe pagină. Caracteristică importantă este că funcționează numai cu elemente de tabel, elemente inline și inline-block. Sprijinit de toate browserele moderne.

Sintaxa CSS vertical-align

... vertical-align : valoare ; ...

• linia de bază - alinierea la linia de bază a strămoșului (sau pur și simplu limita inferioară a părintelui)
• jos - aliniați la partea de jos a liniei (sau elementul care se află sub toate)
• mijloc - aliniați punctul de mijloc al elementului la linia de bază a părintelui plus jumătate din înălțimea părintelui
• sub - afișarea apare sub linie (arata ca un indice)
• super - afișarea are loc deasupra liniei (ca superscript)
• text-bottom - aliniați marginea de jos a elementului la marginea de jos a liniei
• text-top - aliniați marginea superioară a elementului la marginea superioară a liniei
• sus - aliniați marginea superioară a elementului cu partea de sus a celui mai înalt element din linie
• inherit - moștenește valoarea părintelui
• valoare - indicată în pixeli. Un număr pozitiv se deplasează în sus față de linia de bază. Negativ jos
• dobândă – indicată în procente. Un număr pozitiv se deplasează în sus față de linia de bază. Negativ jos

Valoarea implicită de aliniere verticală:

• linie de bază (pentru elementele în linie)
• mijloc (pentru celulele tabelului)

Alinierea verticală în tabele

Cea mai comună utilizare a vertical-align este în celulele tabelului. În etichetă

utilizați atributul valign.

Sintaxa CSS valign pentru tabele

Unde valoarea poate lua următoarele valori:

• linie de bază - alinierea la prima linie de bază șir de text
• jos - aliniați la marginea de jos a celulei tabelului
• mijloc - alinierea la mijlocul celulei
• sus - aliniați la marginea superioară a celulei

De exemplu:

sau

Aliniați la partea de sus

Alinierea la centru

Alinierea de jos

Aliniați la partea de sus

Alinierea la centru

Alinierea de jos

Exemple cu aliniamente verticale

Exemplul 1. Valori de aliniere verticală: linie de bază, jos, sus, sub

Text aliniat vert_align_baseline
Text aliniat vert_align_bottom
Text aliniat vert_align_top
Text cu aliniere vert_align_sub

Exemplul 2: valori de aliniere verticală: valori absolute și procente

Mai jos sunt exemple de aliniere verticală cu valoare absolută și procente.

Se convertește în următoarele pe pagină:

Șir sursă. Text aliniat cu 10 pixeli în sus
Șir sursă. Text aliniat cu 5 pixeli în jos
Șir sursă. Text aliniat cu 50% în sus
Șir sursă. Text aliniat cu 30% în jos

Notă

Valoarea vertical-align: middle nu se aliniază element inlineîn centrul element mareîn linie (cum ar fi de așteptat). În schimb, valoarea mijlocului aliniază elementul în raport cu ipoteticul litera mica„X” (numit și înălțimea x).

Pentru a accesa vertical-align din JavaScript, trebuie să scrieți următoarea construcție:

object.style.verticalAlign ="VALUE "