CSS span alinierea verticală. CSS - Aliniere la centru

Alinierea elementelor pe o pagină web poate fi o sarcină dificilă, mai ales când vine vorba de alinierea verticală a textului. Această întrebare se găsește adesea pe forumuri, iar rezolvarea acestei probleme este deosebit de dificilă pentru utilizatorii începători. Dar în realitate nu este nimic complicat aici. Tot ce aveți nevoie este puține cunoștințe despre foile de stil în cascadă CSS. Deoarece toate acestea se fac datorită regulilor sale.

Alinierea verticală a textului poate fi realizată în cel puțin cinci moduri diferite. Fiecare dintre ele este bun în felul său, având în vedere circumstanțele și detaliile situației. Vom analiza mai multe exemple și, pe baza condițiilor, veți alege rotația potrivită pentru dvs.

Prima metodă cu înălțimea liniei

Prima metodă este foarte banală și are un mare dezavantaj, care îi limitează aplicarea. Dar totuși, orice s-ar spune, poate fi util și chiar aduce rezultatul dorit. Aceasta va fi o aliniere condiționată, deoarece în esență setăm înălțimea liniei pentru a se potrivi cu înălțimea blocului folosind proprietatea line-height.

primul exemplu. demonstrația #1

/* Nr.1 */ .talign1( chenar: 1px roșu continuu; înălțime: 200px;/* înălțimea blocului */ ) .talign1 > p( line-height:200px;/* setați înălțimea liniei în funcție de înălțimea blocului * / margin :0;/* eliminați umplutura exterioară, dacă există */ text-align:center;/* aliniați textul orizontal cu centrul */ padding: 0;/* eliminați umplutura interioară, dacă există */ ) /* final nr. 1*/

Exact în același mod, este posibilă implementarea imaginii în centrul vertical, dar adăugând o nouă proprietate vertical-align: middle; .

Exemplu. Demo #2

/* Nr.2 */ .talign2( chenar: 1px roșu continuu; line-height:200px;/* blocați înălțimea liniei */ ) .talign2 div( text-align:center;/* aliniați elementele orizontal în centru */ ) .talign2 img( vertical-align:middle;/* aliniați imaginile vertical în centru */ chenar: 1px negru solid; ) /* end №2*/

Alinierea cu proprietatea poziției

Această metodă este utilizată pe scară largă în multe sarcini CSS, inclusiv în sarcina noastră. Dar trebuie menționat că nu este complet perfect și are efectele sale secundare. Acest lucru se datorează faptului că centrarea procentuală a elementului va fi centrată pe marginea din stânga sus a blocului interior.

Prin urmare, trebuie să setați o valoare negativă pentru marje. Dimensiunea adânciturii din partea de sus ar trebui să corespundă cu jumătate din înălțimea blocului intern, iar adâncitura din stânga ar trebui să corespundă cu jumătate din lățimea. Astfel, obținem centrul absolut.

În această opțiune, probabil că este obligatoriu să cunoașteți exact înălțimea și lățimea elementului copil. În caz contrar, poate apărea o centrare incorectă.

/* Nr.3 */ .talign3( chenar: 1px roșu continuu; înălțime: 200px;/* înălțime bloc */ poziție: relativă; ) .talign3 div( poziție: absolut; sus: 50%; stânga: 50%; înălțime : 30% latime: 50% margine: -5% 0 0 -25%: 1px negru;

Alinierea cu proprietatea tabelului

Aici folosim o tehnică veche, transformând elementele într-un tabel cu celule. În acest caz, tabelul etichetează

nu se va aplica, dar va folosi proprietăți CSS precum display: table; , afișare: tabel-celulă; . În versiunile mai vechi de IE, această metodă nu funcționează și nu este necesară. Mai folosește cineva cu adevărat?

Exemplu. demonstrația #4

/* Nr.4 */ .talign4( chenar: 1px roșu continuu; înălțime: 200px;/* înălțime bloc */ afișare: tabel; lățime: 100%; ) .talign4 div( afișare: celulă-tabel; aliniere verticală: middle ; text-align:center ) /* sfârşitul #4*/

Alinierea cu proprietatea flex

Aceasta este o opțiune mai specifică cu proprietăți care nu se găsesc atât de des în aspectul site-ului web. Dar, cu toate acestea, în cazuri rare sunt foarte utile.

Aliniați textul vertical în CSS- o muncă foarte grea. Am văzut destui oameni care se luptă cu asta încât să găsesc în mod constant erori „critice” atunci când vine vorba de design responsive real.

Dar nu vă temeți: dacă vă luptați deja cu alinierea verticală CSS, ați ajuns la locul potrivit.

Să vorbim despre proprietatea de aliniere verticală CSS

Când am început să lucrez în dezvoltarea web, m-am luptat puțin cu această proprietate. M-am gândit că ar trebui să funcționeze ca o proprietate clasică" alinierea textului" Oh, dacă totul ar fi atât de simplu...

proprietate CSS vertical-align funcționează excelent cu tabele, dar nu cu div-uri sau alte elemente. Când îl utilizați pe un div, acesta aliniază elementul în raport cu alte div-uri, dar nu și conținutul său. În acest caz, proprietatea funcționează numai cu afișarea: inline-block; .

Vezi exemplul

Vrem să concentrăm conținutul, nu div-ul în sine!

Aveți două opțiuni. Dacă aveți doar div-uri text, puteți utiliza proprietatea line-height. Aceasta înseamnă că trebuie să cunoașteți înălțimea elementului, dar nu o puteți seta. În acest fel, textul tău va fi întotdeauna în centru.

Adevărul despre această abordare Alinierea verticală CSS exista un dezavantaj. Dacă textul are mai multe linii, atunci înălțimea liniei va fi înmulțită cu numărul de linii. Cel mai probabil, în acest caz, vei ajunge cu o pagină teribil de aranjată.

Aruncă o privire la acest exemplu

Dacă conținutul pe care doriți să îl centrați constă din mai multe rânduri, atunci este mai bine să utilizați div-urile de tabel. Puteți folosi și tabele, dar acest lucru nu este corect din punct de vedere semantic. Dacă aveți nevoie de pauze în scopuri receptive, este mai bine să utilizați elemente div.

Pentru ca acest lucru să funcționeze, trebuie să existe un container părinte cu display: table și în interiorul acestuia numărul dorit de coloane pe care doriți să le centrați folosind display: table-cell și vertical-align: middle .

Vezi exemplul

De ce funcționează acest lucru cu marcajul tabelului, dar nu cu elementele div? Pentru că rândurile din tabel au aceeași înălțime. Atunci când conținutul unei celule de tabel nu folosește tot spațiul disponibil în înălțime, browserul adaugă automat umplutură verticală pentru a centra conținutul.

proprietatea poziției

Să începem cu elementele de bază ale alinierii verticale CSS div:

poziție: static este implicit. Elementul este redat conform ordinii HTML;
poziție: absolută - folosită pentru a determina poziția exactă a unui element. Această poziție este întotdeauna legată de elementul părinte poziționat relativ cel mai apropiat (nu static). Dacă nu determinați poziția exactă a unui element, veți pierde controlul asupra acestuia. Va apărea aleatoriu, ignorând complet fluxul documentului. În mod implicit, elementul apare în colțul din stânga sus;
poziție: relativă - folosit pentru a poziționa un element față de poziția sa normală (statică). Această valoare păstrează ordinea fluxului de documente;
poziție: fixă - folosită pentru a poziționa elementul în raport cu fereastra browserului, astfel încât să fie întotdeauna vizibil în fereastra de vizualizare.

Notă: unele proprietăți ( top și z-index) funcționează numai dacă elementul este setat pe poziție (nu static).

Să trecem la treabă!

Doriți să implementați Alinierea centrală verticală CSS? Mai întâi creați un element cu poziție și dimensiuni relative. De exemplu: 100% în lățime și înălțime.

Al doilea pas poate varia în funcție de browserele țintă, dar puteți utiliza una dintre cele două opțiuni:

Proprietate veche: trebuie să cunoașteți dimensiunea exactă a ferestrei pentru a elimina jumătate din lățime și jumătate din înălțime. Vezi exemplul;
Noua proprietate CSS3: Puteți adăuga o proprietate de transformare cu o valoare de translație de 50% și blocul va fi întotdeauna în centru. Vezi exemplu.

Practic, dacă doriți să centrați conținutul, nu folosiți niciodată top: 40% sau stânga: 300px . Acest lucru funcționează bine pe ecranele de testare, dar nu este centrat.

Amintiți-vă poziția: fix? Puteți face același lucru cu el ca și cu o poziție absolută, dar nu aveți nevoie de o poziție relativă pentru elementul părinte - acesta va fi întotdeauna poziționat relativ la fereastra browserului.

Ați auzit de specificația flexbox?

Puteți folosi flexbox. Aceasta este mult mai bună decât orice altă opțiune centrați alinierea textului CSS pe verticală. Cu flexbox, gestionarea elementelor este ca o joacă de copii. Problema este că trebuie să renunțați la unele browsere, cum ar fi IE9 și versiunile de mai jos. Iată un exemplu despre cum să centrați vertical un bloc:

Vezi exemplu

Folosind un aspect flexbox, puteți centra mai multe blocuri.

Dacă aplici ceea ce înveți din aceste exemple, poți stăpâni Alinierea blocului vertical CSS cât mai repede posibil.

Link-uri și lecturi suplimentare

Învățarea de marcare CSS

FlexBox Froggy

Cutie de nisip Flexbox

Traducerea articolului „ Aliniere verticală CSS pentru toată lumea (manechine incluse)” a fost pregătit de echipa prietenoasă de proiect.

Un designer are uneori o întrebare: cum să centrați elementele pe verticală? Și asta provoacă anumite probleme. Cu toate acestea, există mai multe metode pentru centrarea elementelor pe verticală și fiecare dintre aceste metode este destul de simplă. Acest articol descrie unele dintre aceste metode.

Pentru a vedea fiecare metodă în acțiune, faceți clic pe butonul demo sau pe imagine.

Să discutăm câteva dintre problemele care împiedică centrarea verticală.

Vertical-Align

Centrarea orizontală a unui element este destul de ușor de implementat (folosind CSS). Un element inline poate fi centrat pe orizontală dând containerului său părinte o proprietate de aliniere a textului center . Când un element este un element bloc, pentru a-l centra, trebuie doar să setați lățimea (lățimea) și să setați valorile marginilor din dreapta (margine-dreapta) și din stânga (marja-stânga) la automat.

În ceea ce privește textul: mulți oameni încep să folosească proprietatea vertical-align pentru centrare. Este logic și prima mea alegere ar fi aceeași. Pentru a centra un element într-un tabel, puteți utiliza atributul valign.

Cu toate acestea, atributul valign funcționează numai atunci când este aplicat unei celule (de exemplu, ). Proprietatea de aliniere verticală CSS poate fi aplicată unei celule și unor elemente inline.

Textul este centrat în raport cu înălțimea liniilor (spațiere între linii).
În raport cu tabelul, fără a intra în detalii, centrarea are loc relativ la înălțimea rândului.

Din păcate, proprietatea de aliniere verticală nu poate fi aplicată elementelor la nivel de bloc, cum ar fi un paragraf (p) în interiorul unei etichete div.

Cu toate acestea, există și alte metode pentru centrarea elementelor pe verticală și puteți utiliza în continuare proprietatea de aliniere verticală acolo unde este necesar. Ce metodă să utilizați depinde de ceea ce veți centra.

Spațierea liniilor sau înălțimea liniilor

Această metodă ar trebui utilizată numai atunci când trebuie să centrați o linie de text. Pentru a face acest lucru, trebuie să setați înălțimea liniilor (spațierea între linii) a elementului care conține text la mai mare decât dimensiunea fontului.

În mod implicit, există spațiu egal deasupra și sub text, astfel încât textul este centrat vertical.

În acest caz, nu este necesar să specificați înălțimea elementului părinte.

Iată textul

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

Această metodă funcționează în toate browserele, dar nu uitați că ar trebui folosită pentru o linie de text. Dacă textul dvs. se întinde pe mai mult de un rând, utilizați o metodă diferită. Valoarea proprietății line-height poate fi orice, dar nu mai mică decât înălțimea fontului. În practică, această metodă funcționează excelent pentru centrarea unui meniu orizontal.

Metoda CSS folosind proprietățile tabelului

După cum am scris deja, conținutul unei celule poate fi centrat folosind proprietatea CSS de aliniere verticală. Elementul părinte trebuie reprezentat ca un tabel, elementul copil trebuie desemnat ca o celulă și proprietatea vertical-align trebuie aplicată acestuia cu valoarea middle . În acest fel, orice conținut din elementul copil va fi centrat vertical. Codul CSS este dat mai jos.

Conţinut

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

Din păcate, această metodă nu funcționează în versiunile mai vechi ale browserului IE. Dacă aveți nevoie de suport pentru browser pentru IE6 și mai jos, adăugați o declarație display: inline-block elementului copil.

#copil (afisare: inline-block; )

Poziționare absolută și marjă negativă

Această metodă este concepută pentru elemente la nivel de bloc și funcționează în toate browserele. Trebuie să setați înălțimea elementului care trebuie centrat.

Mai jos este codul în care elementul copil este centrat folosind această metodă.

Conţinut

#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 trebuie să poziționați elementul părinte și copil. Apoi setăm offset-ul elementului copil la 50% față de partea de sus și stânga a elementului părinte, centrând astfel elementul copil față de elementul părinte. Cu toate acestea, manipulările noastre vor centra colțul din dreapta sus al elementului copil în centrul elementului părinte, ceea ce, desigur, nu ni se potrivește.

Sarcina noastră: să mutăm elementul copil în sus și la stânga, în raport cu elementul părinte, astfel încât elementul copil să fie centrat vizual vertical și orizontal. Acesta este motivul pentru care trebuie să cunoașteți înălțimea și lățimea elementului copil.

Deci, ar trebui să dăm elementului copil o marjă de sus și stânga negativă egală cu jumătate, respectiv, lățimea și înălțimea elementului copil.

Spre deosebire de primele două metode, această metodă este destinată elementelor la nivel de bloc. Metoda funcționează în toate browserele, dar conținutul poate depăși înălțimea elementului părinte și se poate extinde dincolo de limitele acestuia. Această metodă funcționează cel mai bine atunci când înălțimea și lățimea elementelor sunt fixe.

Poziționarea absolută a unui element copil

Ca și în metoda anterioară, elementele părinte și copil sunt poziționate relativ și, respectiv, absolut.

În codul CSS centrez elementul copil atât pe verticală, cât și pe orizontală, totuși puteți utiliza doar centrarea verticală.

Conţinut

#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 acestei metode este că puteți poziționa un element copil folosind valorile proprietăților de sus, stânga, dreapta, jos egale cu 0. Deoarece elementul nostru copil este mai mic decât elementul părinte, nu se va putea „lipi”. ” la elementul părinte.

Valorile marjei pentru toate cele patru laturi ale elementului copil sunt zero, ceea ce centrează elementul vertical în raport cu părintele. Din păcate, această metodă are aceleași dezavantaje ca și metoda anterioară: este necesară fixarea înălțimii și lățimii copilului, lipsa suportului pentru browserele IE mai vechi.

Marginile de jos și de sus sunt egale

În această metodă, atribuim în mod explicit umplutură egală (de jos și de sus) elementului părinte, care centrează vizual elementul copil pe verticală.

Conţinut

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

Folosesc dimensiuni relative. Dacă dimensiunile blocurilor sunt fixe, atunci va trebui să faceți niște calcule matematice.

De exemplu, dacă elementul părinte are o înălțime de 400 px, iar copilul are 100 px, atunci ar trebui să setați umplutura de sus și de jos la 150 px.

150 + 150 + 100 = 400

div plutitor

Această metodă implică un bloc flotant gol care controlează poziția verticală a elementului copil. Div-ul plutitor trebuie plasat înaintea elementului copil, vezi codul HTML de mai jos.

Conţinut

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

Mai întâi mutăm caseta plutitoare la stânga (sau la dreapta) și îi dăm o înălțime de 50% din părintele ei. În acest fel, blocul plutitor va umple jumătatea superioară a elementului părinte.

Deoarece blocul este plutitor, este eliminat din fluxul general al documentului, prin urmare, blocului copil ar trebui să i se atribuie proprietatea clear cu valoarea ambelor . Am setat valoarea la ambele, dar puteți utiliza o valoare care se potrivește cu direcția de poziționare a elementului plutitor.

În prezent, marginea superioară a elementului copil se află direct sub marginea inferioară a elementului plutitor. Trebuie să ridicăm elementul copil la jumătate din înălțimea elementului plutitor. Pentru a face acest lucru, trebuie doar să setați marja inferioară negativă pentru blocul flotant la 50%.

Funcționează în toate browserele. Dezavantajul acestei metode este că necesită un bloc gol și necesită cunoașterea înălțimii elementului copil.

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 „ umplutura".

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","corect","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 ;

Alinierea orizontală

Alinierea folosind „text-align: center”

Pentru a alinia textul într-un bloc există o proprietate specială " alinierea textului". 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.

Alinierea 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 line-height

În cazul în care există o singură linie într-un bloc, puteți obține alinierea verticală a acestuia folosind butonul " înălțimea 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;

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

În CSS, unele lucruri aparent simple nu sunt atât de ușor de făcut. Unul dintre aceste lucruri este alinierea, adică. când un element trebuie poziționat într-un anumit mod față de altul.

Acest articol prezintă câteva soluții gata făcute care vor ajuta la simplificarea activității de centrare a elementelor pe orizontală și/sau verticală.

Notă: Sub fiecare soluție este o listă de browsere care indică versiunile în care funcționează codul CSS specificat.

CSS - Center Align Block

1. Alinierea unui bloc la centrul altuia. În acest caz, primul și al doilea bloc au dimensiuni dinamice.

...

Părinte ( poziție: relativ; ) .copil ( poziție: absolut; stânga: 50%; sus: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50% , -50%) -ms-transform: translate(-50%, -50%) -o-transform: translate(-50%, -50%); ;

Chrome 4.0+
Firefox 3.6+
Internet Explorer 9+
Opera 10.5+
Safari 3.1+

2. Alinierea unui bloc la centrul altuia. În acest caz, al doilea bloc are dimensiuni fixe.

Părinte (poziție: relativă; ) .copil (poziția: absolut; stânga: 50%; sus: 50%; /* lățime și înălțime a 2 blocuri */ lățime: 500px; înălțime: 250px; /* Valorile sunt determinate în funcție de pe dimensiunea sa */ /* margin-left = - lățime / 2 */ margin-left: -250px /* margin-top = - înălțime / 2 */ margin-top: -125px )