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ăspunsul este „puteți”, dar din cauza suportului slab CSS în browserul 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

Majoritatea browserelor moderne acceptă CSS2.1, și anume valoarea tabel-celulă pentru proprietatea de afișare. Acest lucru ne oferă posibilitatea de a forța 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 imbricat în 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)

Alinierea elementelor pe orizontală și pe verticală se poate face în diferite moduri. Alegerea metodei depinde de tipul elementului (bloc sau inline), tipul poziționării acestuia, dimensiunea etc.

1. Alinierea orizontală la centrul blocului/paginii

1.1. Dacă este specificată lățimea blocului:

div ( lățime: 300 px; margine: 0 automat; /*centrează elementul orizontal în blocul părinte*/ )

Dacă doriți să aliniați un element inline în acest fel, acesta trebuie să fie setat să afișeze: bloc;

1.2. Dacă un bloc este imbricat într-un alt bloc și lățimea acestuia nu este specificată/specificată:

.wrapper(text-align: center;)

1.3. Dacă blocul are o lățime și trebuie să fie centrat pe blocul părinte:

.wrapper (poziție: relativă; /*setează poziționarea relativă pentru blocul părinte, astfel încât apoi să putem poziționa absolut blocul în interiorul acestuia*/) .box ( lățime: 400px; poziție: absolut; stânga: 50%; margin-left: -200px / *deplasați blocul la stânga cu o distanță egală cu jumătate din lățime*/ )

1.4. Dacă blocurile nu au o lățime specificată, le puteți centra folosind un bloc de înveliș părinte:

.wrapper (text-align: center; /*plasați conținutul blocului în centru*/) .box ( afișare: inline-block; /*aranjați blocurile pe orizontală*/ margin-right: -0.25em; /* eliminați spațiul potrivit dintre blocuri*/ )

2. Alinierea verticală

2.1. Dacă textul ocupă un rând, de exemplu, pentru butoane și elemente de meniu:

.button ( înălțime: 50 px; înălțime linie: 50 px; )

2.2. Pentru a alinia vertical un bloc într-un bloc părinte:

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

2.3. Alinierea verticală după tipul tabelului:

.wrapper ( afișare: tabel; lățime: 100%; ) .box ( afișare: celulă-tabel; înălțime: 100 px; aliniere text: centru; aliniere verticală: mijloc; )

2.4. Dacă un bloc are o lățime și o înălțime date și trebuie să fie centrat pe blocul său părinte:

.wrapper ( poziție: relativ; ) .box ( înălțime: 100px; lățime: 100px; poziție: absolut; sus: 0; dreapta: 0; jos: 0; stânga: 0; margine: automat; overflow: automat; /*to) conținutul nu s-a răspândit */)

2.5. Poziționare absolută în centrul paginii/blocului folosind transformarea CSS3:

dacă sunt specificate dimensiuni pentru element

div ( width: 300px; /*setează lățimea blocului*/ height:100px; /*setează înălțimea blocului*/ transform: translate(-50%, -50%); poziție: absolut; top: 50 %; stânga: 50% ;

dacă elementul nu are dimensiuni și nu este gol

h1 ( marja: 0; transformare: translate(-50%, -50%); poziție: absolut; sus: 50%; stânga: 50%; )

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

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

Problemă de centrare verticală

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

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

Dar atributul valign funcționează numai pe celulele tabelului. Și proprietatea de aliniere verticală este foarte asemănătoare cu aceasta. 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 vertical-align nu funcționează pe elementele la nivel de bloc (de exemplu, paragrafele din interiorul unui element div). Această situație poate face să creadă că nu există o soluție la problema alinierii verticale.

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

Metoda linie-înălțime

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

În mod implicit, spațiul alb va fi distribuit uniform în partea de sus și de jos a 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. Puteți utiliza orice valoare mai mare decât dimensiunea fontului textului.

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

Setăm ieșirea tabelului la elementul div părinte și ieșim 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, cunoașterea înălțimii elementului în acest caz este necesară. 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 marginilor pentru a se 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 păcate, această metodă 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; )

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

Unitățile de măsură relative sunt utilizate pentru a redimensiona dinamic elementele. 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 setarea căptușelii exterioare a unui element. De asemenea, puteți utiliza margini în cadrul unui element. Decizia de a folosi margini sau umplutură 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ă analizați proiectul și să alegeți pe cel care se potrivește cel mai bine cerințelor.

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. Alinierea 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șajul regulii: bloc inline la elementul interior și aliniere text: centru și aliniere verticală: mijloc la elementul exterior.

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

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; culoarea fundalului: #ffc; ) .intern ( afișare: bloc inline; lățime: 100 px; înălțime: 100 px; culoarea fundalului : #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 decât atât, 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 setată 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: reguli de mijloc.

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 căptușeala 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 la jumătate din propria î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 nu a fost posibilă setarea valorii 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 utilizată 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.

Alinierea diferitelor elemente, cum ar fi pe un site web sau pe o pagină, este inițial o sarcină dificilă pentru unii, deoarece alinierea verticală a textului este afectată. Destul de ciudat, una dintre cele mai dificile moduri de a folosi CSS este centrarea conținutului. Centrarea conținutului pe orizontală este relativ ușoară în anumite momente. Centrarea conținutului pe verticală este aproape întotdeauna dificilă. Centrarea unui element diferit care trebuie aliniat vertical folosind CSS. Aceasta este cu siguranță o întrebare foarte frecventă care creează probleme pentru designeri și web masters. Cu toate acestea, există multe metode pentru a efectua centrarea verticală și fiecare dintre ele este destul de ușor de utilizat.

Dacă l-ați încercat vreodată, este dificil, mai ales dacă doriți să evitați utilizarea tabelelor. Din fericire, strigătele noastre de ajutor au fost auzite, iar una dintre noile arme adăugate la arsenalul CSS pentru a rezolva această problemă este un tip de aspect cunoscut sub numele de aspect flexibil al casetei. După cum veți afla în câteva momente, vă oferă câteva caracteristici foarte bune pentru a simplifica machetele complexe. Unele dintre aceste funcționalități grozave vă permit, de asemenea, să vă centrați conținutul pe verticală și pe orizontală și asta este ceea ce vom acoperi în acest tutorial. Puteți face acest lucru cu umplutură într-o oarecare măsură, dar vă poate duce aspectul pe ecrane mai mici. Adăugarea unei clase CSS personalizate la foaia de stil înseamnă că puteți centra vertical orice conținut în câteva secunde.

Alinierea orizontală determină modul în care marginile din stânga și din dreapta ale unui paragraf se aliniază între marginile din stânga și din dreapta ale casetei de text. Alinierea verticală determină plasarea verticală a caracterului în câmpul de text. Lipsa unor modalități bune de a centra vertical elementele în CSS a fost un defect întunecat în reputația sa pentru aproape întreaga sa existență.

Prima metodă cu înălțimea liniei

Prima metodă este simplă și oarecum banală, dar are dezavantajele ei care îi vor limita utilizarea. La codificarea paginilor html pentru un site web, spațierea între rânduri a conținutului text este probabil unul dintre atributele care sunt de obicei lăsate implicit. În general, trebuie să setăm înălțimea liniei în sine, care vine cu o înălțime similară pentru blocul în care este utilizat inaltimea liniei proprietate.

CSS

Constitutesim_first(
chenar: 2px solid #bf1515;
înălțime: 175px;
}
.constutesim_first > p(
înălțimea liniei: 175px;
marja:0;
text-align:center;
umplutură: 0;
dimensiunea fontului: 17px;
culoare: #3152a0;
familie de fonturi: Tahoma;
greutatea fontului: bold;
}

De asemenea, puteți vedea imediat cum va arăta totul în realitate.

Folosind o metodă similară, este posibil să realizați cum să poziționați imaginea, care va fi în centru și cu siguranță verticală. Aici tot ce rămâne este să specificați o proprietate: vertical-align: middle; care este responsabil pentru afișarea imaginii.

CSS

A doua variantă (
chenar: 2px roșu continuu;
înălțimea liniei: 158px;
}

A doua variantă div(
text-align:center;
}
.a doua variantă img (
vertical-align: mijloc;
chenar: 0px solid #3a3838;
}

Implementăm instantanee centrate și verticale ale imaginilor.

Alinierea cu proprietatea poziției

Aceasta este probabil cea mai cunoscută metodă, dar cea mai utilizată atunci când este folosită cu CSS. Dar aici trebuie să adăugăm că nici nu este ideală și această metodă are și propriile sale mici nuanțe care sunt asociate cu centrul elementului, care dacă este setat ca procent, va fi centrat pe partea stângă a elementului. partea de sus, în interiorul blogului în sine.

CSS

Opțiune de competiție (
chenar: 2px solid #d40e0e;
inaltime: 162px;
poziție: relativă;
}
.competaird-option div (
poziție: absolută;
sus: 50%;
stânga: 50%;
înălțime: 28%;
latime: 49%;
marja: -2% 0 0 -25%;
chenar: 2px solid #4a4848;
}

Spațierea dintre linii sau înălțimea liniilor este înălțimea verticală dintre liniile de text dintr-o pagină HTML redată. Aproape întotdeauna, această valoare a distanței este setată la o valoare adecvată de către browser sau motorul de randare. Această valoare depinde de obicei de fontul paginii afișate și de alți factori.

Alinierea cu proprietatea tabelului

În această metodă, folosim metoda dovedită și veche, în care transformăm elementele într-un tabel în care se află celulele. În ceea ce privește eticheta numită table, aceasta nu va fi folosită aici aici vom seta proprietăți CSS complet diferite, aceasta este display: table;, display: table-cell;. Dacă vorbim despre cele mai vechi versiuni de IE, atunci datele pur și simplu nu vor fi afișate aici. Sper că v-ați actualizat browserul, deoarece nu mai este relevant și afișează aproape totul incorect.

Varianta Cherevert (
chenar: 2px solid #c30b0b;
înălțime: 173px;
afisare: tabel;
latime: 100%;
dimensiunea fontului: 17px;
greutatea fontului: bold;
culoare: #3945a0;
}

Cherevert-variation div(
afisare: tabel-celula;
vertical-align: mijloc;
text-align:center;
}

În primul rând, să vedem care este valoarea implicită folosită de majoritatea browserelor. Majoritatea browserelor moderne de zi au spațiere între linii.

Alinierea cu proprietatea flex

Aici ajungem la o versiune mai originală, care are proprietăți proprii care rareori pot fi găsite în aspectul unei resurse de internet. Dar ele sunt încă folosite, iar în unele cazuri sunt utile. Aceasta stabilește axa principală, astfel încât definiția elementelor direcționale flexibile este plasată în containerul de dischetă.

CSS

Varianta-orizontală (
chenar: 2px solid #d20c0c;
înălțime: 147px;
display: flex;
alinierea elementelor: centru;
justificare-conținut: centru;
dimensiunea fontului: 18px;
greutatea fontului: bold;
culoare: #49518c;
}

Puteți specifica o valoare pentru înălțimea rândului în același mod în care ați specifica orice altă dimensiune în css, fie ca număr, dimensiune pixeli sau procent.

Alinierea cu proprietatea de transformare

Și acum am ajuns la cea mai extremă metodă, dar nu la cea mai recentă aplicație în utilizarea designului său web. Totul este simplu aici, trebuie să mutați vertical elementul specificat la valoarea de care aveți nevoie. Proprietate transforma, aceasta este o listă de transformări pe care instalatorul le aplică la instalarea pachetului. Instalatorul aplică transformările în aceeași ordine în care sunt specificate în proprietate.

CSS

Vertical-medilpasudsa (
chenar: 2px solid #e00a0a;
înălțime: 158px;
dimensiunea fontului: 19px;
greutatea fontului: bold;
culoare: #353c71;
}
.vertical-medilpasudsa > div(
poziție: relativă;
sus: 50%;
transforma: translateY(-50%);
text-align:center;
}

Când specificați valori ca număr, va folosi dimensiunea actuală a fontului ca bază. Dimensiunea curentă a fontului este înmulțită cu numărul pe care îl specificați pentru a calcula înălțimea liniei sau spațiul dintre linii.

Dacă doriți să centrați caracterele orizontal într-un element, ar trebui să utilizați text-align: center. O opțiune este dacă doriți să o centrați vertical și aveți un subsol de antet fix și un rând de text, setați înălțimea liniei să fie aceeași cu înălțimea subsolului dvs.

Dacă trebuie să centrați textul într-un element, cum ar fi un div, un antet sau un paragraf, puteți utiliza proprietatea CSS text-align.

Text-align are câteva proprietăți valide:

Centru: Textura este centrată;
stânga: Va fi aliniat pe partea stângă a containerului;
dreapta: Aliniat pe partea dreaptă a containerului
justifica: Forțat să se alinieze atât cu marginile din stânga cât și din dreapta ale containerului, cu excepția liniilor exterioare;
justifica-toata: Face ca linia extremă să justifice semnele;
start: La fel ca în stânga, doar dacă direcția merge de la stânga la dreapta. Dar va fi corect dacă setați inițial direcția textului, care se va întâmpla de la dreapta la stânga;
Sfârşit: Opusul începutului;
parinte potrivit: Similar cu moștenirea, cu excepția începutului și a sfârșitului, se calculează relativ la elementul părinte;

Utilizați aceste proprietăți pentru a alinia textul într-un div părinte sau wrapper. Dacă doriți să centrați textul pe orizontală într-un element, ar trebui să utilizați text-align: center.

O opțiune este dacă doriți să o centrați pe verticală, dacă aveți un subsol de antet fix și un rând de text, setați înălțimea liniei să fie aceeași cu înălțimea subsolului dvs.