Aliniați la centru toate div-urile. Cum să aliniați textul în HTML la centrul, lățimea și marginile paginii

Buna ziua! Continuăm să stăpânim elementele de bază ale limbajului HTML. Să vedem ce trebuie să scrieți pentru a alinia textul la centru, lățime sau margini.

Trecând la treabă, să vedem cum să centrați textul în HTML în trei moduri diferite. Ultimele două sunt legate direct la foaia de stil. Poate fi un fișier CSS care se conectează la paginile site-ului și le definește aspectul.

Metoda 1 - lucru direct cu HTML

De fapt, este destul de simplu. Vezi exemplul de mai jos.

Aliniați paragraful la centru.

Dacă trebuie să mutați fragmente de text într-un mod diferit, atunci în loc de parametrul „centru”, introduceți următoarele valori:

• justificare – alinierea textului la lățimea paginii;
• dreapta – pe marginea dreaptă;
• stânga - la stânga.

Prin analogie, puteți muta conținutul care se află în anteturi (h1, h2) și container (div).

Metoda 2 și 3 - folosirea stilurilor

Designul prezentat mai sus poate fi ușor transformat. Efectul va fi același. Pentru a face acest lucru, trebuie să scrieți codul de mai jos.

Bloc de text.

În această formă, codul este scris direct în HTML pentru a centra conținutul textului.

Există o altă modalitate alternativă de a obține rezultate. Va trebui să faceți câțiva pași.

Pasul 1. În codul principal scrieți

Material text.

Pasul 2. În fișierul CSS inclus, introduceți următorul cod:

Rovno (text-align:center;)

Observ că cuvântul „rovno” este doar numele unei clase care poate fi numită diferit. Acest lucru este lăsat la latitudinea programatorului.

Prin analogie, în HTML puteți face textul centrat, justificat și aliniat la marginea dreaptă sau stângă a paginii. După cum puteți vedea, există mult mai multe opțiuni pentru a vă atinge obiectivul.

Doar câteva întrebări:

• Faceți un proiect de informare non-profit?
• Vrei ca site-ul tău să se claseze bine în motoarele de căutare?
• Vrei să câștigi venituri online?

Dacă toate răspunsurile sunt pozitive, atunci priviți doar o abordare integrată a dezvoltării site-ului web. Informațiile vor fi deosebit de utile dacă rulează pe CMS-ul WordPress.

Aș dori să subliniez că propriile site-uri web sunt doar una dintre multele opțiuni pentru a genera venituri pasive sau active pe internet. Blogul meu este dedicat oportunităților financiare online.

Ați lucrat vreodată în domeniul arbitrajului de trafic, copywriting și alte domenii de activitate care generează venituri primare sau suplimentare prin colaborare la distanță? Puteți afla despre asta și multe altele chiar acum pe paginile blogului meu.

Voi publica o mulțime de informații cu adevărat utile în viitor. Ține legătura. Dacă doriți, vă puteți abona la actualizările Workip prin e-mail. Formularul de abonare se găsește mai jos.

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 numai 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 etichetei 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 web 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 dificil 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 browserele 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 numai 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 mutat într-adevăr 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 acest lucru 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ă; aliniere verticală: mijloc; lățime: 500px; înălțime: 500px; poziție: relativă; depășire: 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ă

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

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 .

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

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

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 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: 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 ; ) .riki ( afișare : bloc inline ; înălțime : 100 % ; aliniere verticală : mijloc ; )

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ă!

CSS

HTML

Cred că mulți dintre voi care ați avut de-a face cu aspectul ați întâmpinat nevoia de a alinia elementele pe verticală și de a cunoaște dificultățile care apar la alinierea unui element la centru.

Da, există o proprietate specială de aliniere verticală cu mai multe valori în CSS pentru alinierea verticală. Cu toate acestea, în practică, nu funcționează deloc așa cum era de așteptat. Să încercăm să ne dăm seama.

Să comparăm următoarele abordări. Aliniați folosind:

• Mese,
• indentare,
• inaltimea liniei
• întindere,
• marja negativa,
• transforma
• pseudo element
• flexbox.

Pentru a ilustra, luați în considerare următorul exemplu.

Există două elemente div, unul dintre ele imbricat în celălalt. Să le dăm clasele corespunzătoare - exterioare și interioare.

Provocarea este de a alinia elementul interior cu centrul elementului exterior.

În primul rând, să luăm în considerare cazul când dimensiunile blocurilor externe și interne cunoscut. Să adăugăm afișarea regulii: bloc inline la elementul interior și text-align: centru și vertical-align: mijloc la elementul exterior.

Amintiți-vă că alinierea se aplică numai elementelor care au un mod de afișare în linie sau bloc în linie.

Să setăm dimensiunile blocurilor, precum și culorile de fundal, astfel încât să le vedem marginile.

Exterior ( lățime: 200 px; înălțime: 200 px; aliniere text: centru; aliniere verticală: mijloc; culoare de fundal: #ffc; ) . interior ( afișare: bloc inline; lățime: 100 px; înălțime: 100 px; culoare de fundal : #fcc; )
După aplicarea stilurilor, vom vedea că blocul interior este aliniat orizontal, dar nu vertical:
http://jsfiddle.net/c1bgfffq/

De ce s-a întâmplat? Chestia este că proprietatea de aliniere verticală afectează alinierea elementul în sine, nu conținutul său(cu excepția cazului în care este aplicat celulelor tabelului). Prin urmare, aplicarea acestei proprietăți elementului exterior nu a produs nimic. Mai mult, aplicarea acestei proprietăți unui element interior nu va face nimic, deoarece blocurile inline sunt aliniate vertical față de blocurile adiacente, iar în cazul nostru avem un bloc inline.

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

Alinierea folosind un tabel

Prima soluție care îmi vine în minte este înlocuirea blocului exterior cu un tabel dintr-o celulă. În acest caz, alinierea va fi aplicată conținutului celulei, adică blocului interior.

http://jsfiddle.net/c1bgfffq/1/

Dezavantajul evident al acestei soluții este că, din punct de vedere semantic, este incorect folosirea tabelelor pentru aliniere. Al doilea dezavantaj este că crearea unui tabel necesită adăugarea unui alt element în jurul blocului exterior.

Primul minus poate fi eliminat parțial prin înlocuirea etichetelor table și td cu div și setarea modului de afișare a tabelului în CSS.

.outer-wrapper ( display: table; ) .outer ( display: table-cell; )
Cu toate acestea, blocul exterior va rămâne în continuare un tabel cu toate consecințele care decurg.

Alinierea folosind indentarea

Dacă înălțimile blocurilor interioare și exterioare sunt cunoscute, atunci alinierea poate fi stabilită folosind indentările verticale ale blocului interior folosind formula: (H exterior – H interior) / 2.

Exterior ( înălțime: 200px; ) .interior (înălțime: 100px; margine: 50px 0; )
http://jsfiddle.net/c1bgfffq/6/

Dezavantajul soluției este că este aplicabilă doar într-un număr limitat de cazuri când se cunosc înălțimile ambelor blocuri.

Alinierea folosind înălțimea liniei

Dacă știți că blocul interior nu trebuie să ocupe 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, se recomandă să adăugați și spațiul alb: nowrap și overflow: reguli ascunse.

Exterior ( înălțime: 200 px; înălțime linie: 200 px; ) . interior ( spațiu alb: nowrap; overflow: ascuns; )
http://jsfiddle.net/c1bgfffq/12/

Această tehnică poate fi folosită și pentru a alinia textul cu mai multe linii dacă redefiniți valoarea înălțimii liniei pentru blocul interior și, de asemenea, adăugați afișajul: inline-block și vertical-align: middle rules.

Exterior ( înălțime: 200 px; înălțime linie: 200 px; ) . interior ( înălțime linie: normal; afișare: bloc în linie; aliniere verticală: mijloc; )
http://jsfiddle.net/c1bgfffq/15/

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

Alinierea folosind „stretch”

Această metodă poate fi utilizată atunci când înălțimea blocului extern este necunoscută, dar este cunoscută înălțimea blocului intern.

Pentru a face acest lucru aveți nevoie de:

1. setați poziționarea relativă față de blocul extern și poziționarea absolută față de blocul intern;
2. adăugați regulile de sus: 0 și de jos: 0 la blocul interior, drept urmare se va întinde pe toată înălțimea blocului exterior;
3. setați umplutura verticală a blocului interior la automat.

.exterior (poziție: relativă; ) .interior (înălțime: 100px; poziție: absolut; sus: 0; jos: 0; margine: auto 0; )
http://jsfiddle.net/c1bgfffq/4/

Ideea din spatele acestei tehnici este că setarea unei înălțimi pentru un bloc întins și poziționat absolut face ca browserul să calculeze umplutura verticală într-un raport egal dacă este setat la automat.

Aliniere cu marginea negativă-sus

Această metodă a devenit cunoscută pe scară largă și este folosită foarte des. Ca și precedentul, se folosește atunci când înălțimea blocului exterior este necunoscută, dar este cunoscută înălțimea celui interior.

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

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

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

Alinierea cu transformarea

Această metodă este similară cu cea anterioară, dar poate fi folosită atunci când înălțimea unității interioare este necunoscută. În acest caz, în loc să setați o umplutură negativă de pixeli, puteți utiliza proprietatea de transformare și puteți muta blocul interior în sus folosind funcția translateY și o valoare de -50% .

Exterior ( poziție: relativ; ) .intern ( poziție: absolut; sus: 50%; transform: translateY(-50%); )
http://jsfiddle.net/c1bgfffq/9/

De ce a fost imposibil să setați valoarea ca procent în metoda anterioară? Deoarece valorile procentuale ale marjei sunt calculate în raport cu elementul părinte, o valoare de 50% ar fi jumătate din înălțimea cutiei exterioare și ar trebui să ridicăm cutia interioară la jumătate din înălțimea proprie. Proprietatea de transformare este perfectă pentru aceasta.

Dezavantajul acestei metode este că nu poate fi folosită dacă unitatea interioară are poziționare absolută.

Aliniere cu Flexbox

Cel mai modern mod de aliniere verticală este utilizarea Flexible Box Layout (cunoscută în mod popular sub numele de Flexbox). Acest modul 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ă.

Blocul exterior trebuie setat să afișeze: flex și blocul interior la margine: auto . Și este tot! Frumos, nu-i așa?

Exterior ( afișaj: flex; lățime: 200 px; înălțime: 200 px; ) . interior ( lățime: 100 px; margine: automat; )
http://jsfiddle.net/c1bgfffq/14/

Dezavantajul acestei metode este că Flexbox este acceptat doar de browserele moderne.

Ce metodă ar trebui să aleg?

Trebuie să începeți de la declarația problemei:

• Pentru a alinia textul pe verticală, este mai bine să utilizați indentări verticale sau proprietatea line-height.
• Pentru elementele poziționate absolut cu o înălțime cunoscută (de exemplu, pictograme), metoda cu o proprietate negativă margin-top este ideală.
• Pentru cazuri mai complexe, când înălțimea blocului este necunoscută, trebuie să utilizați un pseudo element sau proprietatea transform.
• Ei bine, dacă sunteți atât de norocos încât nu aveți nevoie să susțineți versiuni mai vechi ale browserului IE, atunci, desigur, este mai bine să utilizați Flexbox.

De la autor: Vă urez bun venit din nou pe paginile blogului nostru. În articolul de astăzi aș dori să vorbesc despre diverse tehnici de aliniere care pot fi aplicate atât la blocuri, cât și la conținutul acestora. În special, cum să aliniați blocurile în css, precum și alinierea textului.

Alinierea blocurilor la centru

În CSS, centrarea unui bloc este ușoară. Aceasta este cea mai cunoscută tehnică pentru mulți, dar aș vrea să vorbesc despre ea chiar acum, în primul rând. Aceasta înseamnă alinierea centrată orizontal în raport cu elementul părinte. Cum se face? Să presupunem că avem un container și subiectul nostru experimental este în el:

< div id = "wrapper" > < div id = "header" > < / div > < / div >

Să presupunem că acesta este antetul site-ului. Nu se întinde pe toată lățimea ferestrei și trebuie să o centram. Scriem astfel:

#antet( latime / max - latime : 800px ; marja: 0 auto;

Trebuie să specificăm lățimea exactă sau maximă și apoi să notăm proprietatea cheii - margine: 0 auto. Setează marginile exterioare ale antetului nostru, prima valoare determină marginile de sus și de jos, iar a doua determină marginile din dreapta și din stânga. Valoarea auto îi spune browserului să calculeze automat umplutura pe ambele părți, astfel încât elementul să fie exact centrat pe părintele său. Confortabil!

Alinierea textului

Aceasta este, de asemenea, o tehnică foarte simplă. Pentru a alinia toate elementele inline, puteți utiliza proprietatea text-align și valorile acesteia: stânga, dreapta, centru. Acesta din urmă centrează textul, care este ceea ce avem nevoie. Puteți chiar să aliniați o imagine în același mod, deoarece este, de asemenea, un element inline în mod implicit.

Aliniați textul pe verticală

Dar acest lucru este mai complicat. În mod implicit, nu există nicio proprietate simplă, binecunoscută, care să centreze cu ușurință textul pe verticală într-un container bloc. Cu toate acestea, există mai multe tehnici cu care designerii de layout au venit de-a lungul anilor.

Setați înălțimea blocului folosind căptușeală. Modul nu este să setați o înălțime explicită folosind înălțimea, ci să o creați artificial folosind căptușeli în partea de sus și de jos, care ar trebui să fie aceleași. Să creăm orice bloc și să îi scriem următoarele proprietăți:

div( fundal: #ccc; umplutură: 30px 0; )

div( fundal: #ccc; umplutură: 30px 0;

Fundalul este doar pentru a arăta vizual marginile, precum și umplutura. Acum, înălțimea blocului este formată din aceste două liniuțe și linia în sine și totul arată astfel:

Definiți înălțimea liniei pentru bloc. Cred că acesta este un mod mai corect dacă trebuie să aliniați o linie de text. Cu acesta, puteți scrie înălțimea conform normalului, folosind proprietatea înălțime. După aceasta, trebuie să seteze și înălțimea liniei, la fel ca înălțimea blocului în ansamblu.

div( înălțime: 60px; înălțime linie: 60px; )

div( inaltime: 60px; înălțimea liniei: 60px;

Rezultatul va fi similar cu imaginea de mai sus. Totul va funcționa chiar dacă adăugați umplutură. Cu toate acestea, doar pentru o linie. Dacă aveți nevoie de mai mult text în element, atunci această metodă nu va funcționa.

Convertiți un bloc într-o celulă de tabel. Esența acestei metode este că celula tabelului are proprietatea vertical-align: middle, care centrează elementul pe verticală. Prin urmare, în acest caz, blocul trebuie setat la următoarele:

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

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

Această metodă este bună deoarece puteți alinia cât de mult text doriți în centru. Dar este mai bine să scrieți display: table în blocul în care este imbricat div-ul nostru, altfel s-ar putea să nu funcționeze.

Ei bine, aici ajungem la ultima tehnică pentru astăzi - aceasta este alinierea verticală a blocurilor în sine. Trebuie spus că, din nou, nu există nicio proprietate care ar fi destinată special pentru aceasta, dar există câteva trucuri despre care ar trebui să știți.

Setați indentări ca procent. Dacă cunoașteți înălțimea unui element părinte și plasați un alt element bloc în interiorul acestuia, îl puteți centra folosind umplutura procentuală. De exemplu, părintele are o înălțime de 600 de pixeli. Puneți un bloc în el care are 300 de pixeli înălțime. Cât de mult ai nevoie să dai înapoi în partea de sus și de jos pentru a-l centra? 150 de pixeli fiecare, ceea ce reprezintă 25% din înălțimea părintelui.

Această metodă permite alinierea numai atunci când dimensiunile permit calcule. Și dacă părintele tău are 887 de pixeli în înălțime, atunci nu vei putea înregistra nimic cu precizie, acest lucru este deja clar.

Inserați un element într-o celulă de tabel. Din nou, dacă transformăm elementul părinte într-o celulă de tabel, atunci blocul inserat în acesta va fi centrat automat pe verticală. Pentru a face acest lucru, părintele trebuie doar să seteze vertical-align: middle.

Și dacă, pe lângă aceasta, scriem și margine: 0 auto, atunci elementul va deveni centrat orizontal!