Alinierea verticală a imaginii css. Toate metodele de aliniere verticală în CSS

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 face ca conținutul să se încadreze într-o nouă linie.

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

este o etichetă de 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 inline și proprietatea 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 alte proprietăți CSS special pentru browserele din familia IE.

Comentariu condiționat

Tip constructie:

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

se numește comentariu condiționat (atenție, tipul de comentariu condiționat trebuie să corespundă complet exemplului dat, până la un spațiu).

Instrucțiunile conținute într-un astfel de comentariu condiționat vor fi executate doar dacă browserul care 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 clasa de containere div 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 toate etichetele div din 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și poziționarea sa relativă:

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

Astfel, am deplasat blocul galben în sus cu 50% din înălțimea sa, față de 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 aceasta duce la consecințe neplăcute: există o înălțime suplimentară pentru derularea 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ă; vertical-align: mijloc; lățime: 500px; înălțime: 500px; poziție: relativă; overflow: ascuns; chenar: 1px negru; )

Îmi pare rău, am uitat să menționez un punct important. Daca incerci setați înălțimea blocului de clasă aliniere text ca procent, atunci ai nimic nu va funcționa.

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

De foarte multe ori este nevoie de a seta înălțimea unui bloc de clasă aliniere text nu în pixeli, ci ca procent din înălțimea blocului părinte și aliniați conținutul containerului div în 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.

Obținem o altă listă suplimentară de proprietăți CSS pentru blocul div imbricat în container aliniere text.

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

Asta e 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 .

Când așezați o pagină, este adesea necesar să efectuați alinierea la centru folosind metoda CSS: de exemplu, centrarea blocului principal. Există mai multe opțiuni pentru a rezolva această problemă, fiecare dintre acestea, mai devreme sau mai târziu, trebuie să fie folosită de orice designer de layout.

Centrare alinierea textului

Adesea, în scopuri decorative, este necesar să setați textul la aliniere la centru CSS în acest caz vă permite să reduceți timpul de aspect. Anterior, acest lucru se făcea folosind atribute HTML, dar acum standardul necesită alinierea textului folosind foi de stil. Spre deosebire de blocuri, pentru care trebuie să modificați marginile, în CSS, centrarea textului se face folosind o singură linie:

• text-align:center;

Această proprietate este moștenită și transmisă de la părinte către toți descendenții. Afectează nu numai textul, ci și alte elemente. Pentru a face acest lucru, acestea trebuie să fie inline (de exemplu, span) sau inline-block (orice blocuri care au setată proprietatea display: block). Această ultimă opțiune vă permite, de asemenea, să modificați lățimea și înălțimea elementului și să ajustați indentările mai flexibil.

Adesea, pe pagini, alinierea este atribuită etichetei în sine. Acest lucru invalidează imediat codul, deoarece W3C a depreciat atributul align. Utilizarea acestuia pe o pagină nu este recomandată.

Alinierea unui bloc la centru

Dacă trebuie să centrați un div, CSS oferă o modalitate destul de convenabilă: utilizarea marginilor. Indentațiile pot fi setate atât pentru elementele bloc, cât și pentru elementele bloc inline. Valoarea proprietății ar trebui să fie 0 (căptușeală verticală) și automată (căptușeală orizontală automată):

• margine:0 auto;

Acum această opțiune este recunoscută ca fiind absolut valabilă. Folosirea padding-ului extern vă permite și să setați imaginea să fie centrată: vă permite să rezolvați multe probleme legate de poziționarea unui element pe pagină.

Aliniați un bloc la stânga sau la dreapta

Uneori, alinierea la centru CSS nu este necesară, dar trebuie să plasați două blocuri unul lângă altul: unul pe marginea stângă, celălalt pe dreapta. În acest scop, există o proprietate float, care poate lua una dintre cele trei valori: stânga, dreapta sau niciunul. Să presupunem că aveți două blocuri care trebuie așezate unul lângă altul. Atunci codul va fi astfel:

• .stânga (float:left;)
• .right(float:right)

Dacă există și un al treilea bloc, care ar trebui să fie situat sub primele două blocuri (de exemplu, un subsol), atunci trebuie să i se atribuie proprietatea clear:

• .stânga (float:left;)
• .right(float:right)
• subsol (clear:both)

Cert este că blocurile cu clase stânga și dreapta cad din fluxul general, adică toate celelalte elemente ignoră însăși existența elementelor aliniate. Proprietatea clear:both permite subsolului sau oricărui alt bloc să vadă elementele care au căzut din flux și interzice plutirea atât în ​​stânga, cât și în dreapta. Prin urmare, în exemplul nostru, subsolul se va deplasa în jos.

Aliniere verticală

Există momente în care nu este suficient să setați alinierea la centru folosind metode CSS, de asemenea, trebuie să schimbați poziția verticală a blocului copil. Orice element în linie sau în bloc poate fi imbricat la marginea de sus sau de jos, în mijlocul unui element părinte sau în orice locație. Cel mai adesea, blocul trebuie aliniat la centru pentru aceasta, se folosește atributul vertical-align. Să presupunem că există două blocuri, unul imbricat în celălalt. În acest caz, blocul interior este un element inline-block (afișare: inline-block). Trebuie să aliniați blocul copil pe verticală:

• aliniere de sus - .child(vertical-align:top);
• aliniere la centru - .child(vertical-align:middle);
• aliniere de jos - .child(vertical-align:bottom);

Nici alinierea textului, nici alinierea verticală nu afectează elementele blocului.

Posibile probleme cu blocurile aliniate

Uneori, centrarea unui div folosind CSS poate cauza mici probleme. De exemplu, când folosiți float: să presupunem că există trei blocuri: .first, .second și .third. Al doilea și al treilea bloc se află în primul. Elementul cu clasa secundă este aliniat la stânga, iar ultimul bloc este aliniat la dreapta. După ce s-au echilibrat, ambele au căzut din flux. Dacă elementul părinte nu are un set de înălțime (de exemplu, 30em), atunci nu se va mai întinde la înălțimea blocurilor sale copil. Pentru a evita această eroare, utilizați un „spacer” - un bloc special care vede .second și .third. Cod CSS:

• .second(float:left)
• .a treia (float:right)
• .clearfix(înălțime: 0; clar: ambele;)

Pseudo-clasa:after este adesea folosită, care vă permite, de asemenea, să returnați blocurile la locul lor prin crearea unui pseudo-spacer (în exemplu, un div cu clasa container se află în interior.first și conține.left și.right) :

• .left(float:left)
• .right(float:right)
• .container:după(conținut:""; afișare:tabel; clear:both;)

Opțiunile de mai sus sunt cele mai comune, deși există mai multe variante. Puteți găsi întotdeauna cel mai simplu și mai convenabil mod de a crea un pseudo-distanțier prin experimentare.

O altă problemă pe care o întâmpină adesea designerii de layout este alinierea elementelor în bloc. Un spațiu este adăugat automat după fiecare dintre ele. Proprietatea marjei, care este setată la o liniuță negativă, ajută la rezolvarea acestui lucru. Există și alte metode care sunt folosite mult mai rar: de exemplu, zeroing În acest caz, font-size: 0 este scris în proprietățile elementului părinte. Dacă există text în interiorul blocurilor, atunci dimensiunea necesară a fontului este deja returnată în proprietățile elementelor de bloc inline. De exemplu, font-size:1em. Această metodă nu este întotdeauna convenabilă, așa că opțiunea cu indentări externe este mult mai des folosită.

Alinierea blocurilor vă permite să creați pagini frumoase și funcționale: aceasta include aspectul aspectului general, aranjarea produselor în magazinele online și fotografii de pe un site web de cărți de vizită.

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. CSS are o proprietate `vertical-align` cu mai 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

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

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% ; transformare : translateY (-50% ); )

7. Alinierea cu un pseudo-element

Aceasta este metoda cea mai universală 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. Blocul interior va fi aliniat vertical în raport cu 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

Cea mai modernă metodă de aliniere verticală este utilizarea 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ă.

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 utilizând „ căptușeală".

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 ; umplutură : 20 px 50 px ; )

Alinierea blocurilor poziționate absolut

Dacă blocul este setat la " poziție: absolută", apoi poate fi poziționat relativ la cel mai apropiat părinte cu „poziție: relativă". Aceasta necesită toate proprietățile (" top","dreapta","fund","stânga„) din blocul interior pentru a atribui aceeași valoare, precum și „marja: 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 ;

Aliniere orizontala

Alinierea folosind „text-align: center”

Pentru a alinia textul într-un bloc există o proprietate specială " aliniere text". 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, link-urilor 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 am decis să copiez o rimă pentru copii undeva, dar mi-am amintit că asta 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 ; )

Alinierea blocurilor 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 abrevierea: „ marja: 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 nu toate sunt foarte frumoase.

Alinierea cu proprietatea line-height

În cazul în care există o singură linie într-un bloc, puteți obține alinierea sa verticală folosind butonul " inaltimea liniei" și setați-l la înălțimea dorită. Pentru fiabilitate, merită să setați și "înălțimea", a cărei valoare va fi egală cu valoarea "line-height", 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 ; vertical-align : fundal : #FFFAF2 ;

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

proprietate " vertical-align„ afectează și celulele tabelului. Cu valoarea setată la „middle”, 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 „ afișare: tabel-celulă".

De obicei folosesc această opțiune pentru alinierea verticală. Mai jos este un exemplu de aspect preluat 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 ;

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: mijloc„. În plus, toate elementele cu „ display: inline" care sunt pe aceeași linie se vor alinia 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 ;

Afișaj: flex ș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ă!