Totul despre alinierea CSS. Centrare absolută orizontală și verticală

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 rezolvarea acestei probleme, 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 cere ca textul să fie aliniat 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ă reglaț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 nu este necesară alinierea centrului CSS, 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:

• .left (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:

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

Cert este că blocurile cu clasele 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ă stabilizare, 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ă, ceea ce 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.stânga și.dreapta) :

• .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ă.

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

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( înălțime: 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ă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!

Aliniați textul vertical în CSS- o muncă foarte grea. Am văzut destui oameni care se luptă cu asta, încât continui să găsesc 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ă" aliniere text" 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 exemplu

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

Aveți două opțiuni. Dacă aveți doar elemente div cu text, atunci 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 exemplu

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

Sa trecem la treaba!

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 exemplu;
• 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ă unele browsere trebuie să fie eliminate, 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 cu nisip Flexbox

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

Câte copii au fost deja sparte despre sarcina de a alinia elemente pe o pagină. Vă aduc în atenție o traducere a unui articol excelent cu o soluție la această problemă de la Stephen Shaw pentru Smashing Magazine - Absolute Horizontal And Vertical Centering In CSS.

Știam cu toții despre marja: 0 auto; pentru centrarea orizontală, dar margine: auto; nu a funcționat pentru verticală. Acest lucru poate fi rezolvat cu ușurință prin simpla setare a înălțimii și aplicarea următoarelor stiluri:

Absolut-Center (marja: automat; poziție: absolut; sus: 0; stânga: 0; jos: 0; dreapta: 0; )
Nu sunt primul care propune această soluție, dar această abordare este rar folosită pentru alinierea verticală. În comentariile la articolul Cum să centrați orice cu CSS, Simon trimite la un exemplu jsFiddle care oferă o soluție excelentă pentru centrarea verticală. Iată mai multe despre acest subiect.

Să aruncăm o privire mai atentă asupra metodei.

Avantaje

• Compatibilitate între browsere (inclusiv IE 8-10)
• Fără markup suplimentar, stil minim
• Adaptabilitate
• Independenta fata de căptușeală(fără dimensionarea cutiei!)
• Funcționează pentru imagini

Defecte

• Trebuie specificată înălțimea (vezi Înălțimea variabilă)
• Se recomandă setarea preaplin: automat pentru ca conținutul să nu se răspândească
• Nu funcționează pe Windows Phone

Compatibilitate browser

Metoda a fost testată și funcționează excelent în Chrome, Firefox, Safari, Mobile Safari și chiar IE 8-10. Un utilizator a menționat că conținutul nu este aliniat vertical pe Windows Phone.

În interiorul recipientului

Conținut plasat într-un recipient cu poziție: relativă se va alinia perfect:

Absolut-Center ( lățime: 50%; înălțime: 50%; preaplin: automat; margine: automat; poziție: absolut; sus: 0; stânga: 0; jos: 0; dreapta: 0; )

Folosind fereastra de vizualizare

Să setăm conținutul pe poziție: fix și să setăm indexul z:

Absolute-Center.is-Fixed ( lățime: 50%; înălțime: 50%; overflow: automat; margine: automat; poziție: fix; sus: 0; stânga: 0; jos: 0; dreapta: 0; z-index: 999; )

Adaptabilitate

Principalul avantaj al metodei descrise este că funcționează perfect atunci când înălțimea sau lățimea este specificată ca procent, și chiar înțelegerea lățime min/lățime maxȘi înălțime min/înălțime max.

Absolute-Center.is-Responsive ( lățime: 60%; înălțime: 60%; lățime minimă: 400px; lățime maximă: 500px; umplutură: 40px; overflow: automat; margine: automat; poziție: absolut; sus: 0; stânga: 0; jos: 0; dreapta: 0; )

Compensare

Dacă site-ul are un antet fix sau trebuie să faceți o altă indentare, trebuie doar să adăugați cod ca acesta la stiluri sus: 70px; Momentan setat margine: auto; blocul de conținut va fi centrat corect în înălțime.

De asemenea, puteți alinia conținutul pe partea dorită, lăsând centrarea în înălțime. Pentru a face acest lucru, trebuie să utilizați dreapta: 0; stânga: auto; pentru alinierea dreaptă sau stânga: 0; dreapta: auto; pentru alinierea la stânga.

Absolute-Center.is-Right ( lățime: 50%; înălțime: 50%; margine: automat; overflow: automat; poziție: absolut; sus: 0; stânga: automat; jos: 0; dreapta: 20px; text-align: dreapta; )

O mulțime de conținut

Pentru a ne asigura că o cantitate mare de conținut nu permite aspectului să se depărteze, folosim preaplin: automat. Va apărea o bară de defilare verticală. De asemenea, puteți adăuga înălțime maximă: 100%; dacă conținutul nu are umplutură suplimentară.
.Absolute-Center.is-Overflow ( lățime: 50%; înălțime: 300px; înălțime maximă: 100%; marjă: automat; overflow: automat; poziție: absolut; sus: 0; stânga: 0; jos: 0; dreapta : 0; )

Imagini

Această metodă funcționează excelent și pentru imagini! Să adăugăm stil inaltime: auto; apoi imaginea se va scala împreună cu containerul.

Absolute-Center.is-Image ( lățime: 50%; înălțime: automat; margine: automat; poziție: absolut; sus: 0; stânga: 0; jos: 0; dreapta: 0; )

Înălțime variabilă

Metoda descrisă necesită o înălțime dată de bloc, care poate fi specificată ca procent și controlată folosind inaltime maxima, ceea ce face ca metoda să fie ideală pentru site-urile web responsive. O modalitate de a nu specifica o înălțime este utilizarea afisare: tabel. În acest caz, blocul de conținut este centrat indiferent de dimensiune.

Pot exista probleme cu compatibilitatea între browsere, poate că ar trebui să utilizați metoda tabel-celule (descrisă mai jos).

• Firefox/IE8: utilizare afisare: tabel Aliniază blocul vertical la marginea de sus a documentului.
• IE9/10: utilizare afisare: tabel Aliniază blocul la colțul din stânga sus al paginii.
• Safari mobil: dacă lățimea este setată la un procent, centrarea orizontală are de suferit

.Absolute-Center.is-Variable (afișare: tabel; lățime: 50%; overflow: automat; margine: automat; poziție: absolut; sus: 0; stânga: 0; jos: 0; dreapta: 0; )

alte metode

Metoda descrisă funcționează excelent în majoritatea cazurilor, dar există și alte metode care pot fi aplicabile pentru a rezolva probleme specifice.

Marja negativă

Probabil cel mai popular mod. Potrivit dacă dimensiunile blocului sunt cunoscute.

Este negativ ( lățime: 300px; înălțime: 200px; umplutură: 20px; poziție: absolut; sus: 50%; stânga: 50%; margine-stânga: -170px; /* (lățime + umplutură)/2 */ margin- sus: -120px; /* (înălțime + umplutură)/2 */ )
Avantaje:

• Compatibilitate între browsere
• Cod minim

Defecte:

• Nu adaptiv
• Aspectul se strecoară dacă există prea mult conținut în recipient
• Trebuie să compensați indentarea sau utilizarea dimensionare cutie: chenar-cutie

Folosind transform

Una dintre cele mai simple moduri acceptă schimbările de înălțime. Există un articol detaliat pe acest subiect - „Centrarea elementelor procentuale de lățime/înălțime” din CSS-Tricks.

Este transformat ( lățime: 50%; marjă: automat; poziție: absolut; sus: 50%; stânga: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate( -50%,-50%); transformare: traducere(-50%,-50%); )
Avantaje:

• Înălțime variabilă
• Cod minim

Defecte:

• Nu funcționează în IE 8
• Utilizarea prefixelor
• Poate interfera cu alte efecte cu transforma
• În unele cazuri, marginile blocurilor și textul sunt neclare în timpul redării

Celulă de masă

Poate una dintre cele mai bune și mai ușoare moduri. Descris în detaliu în articolul „Centrarea verticală pe înălțime flexibilă cu CSS, dincolo de IE7” de 456bereasttreet. Principalul dezavantaj este marcajul suplimentar: sunt necesare trei elemente:

CSS:
.Pos-Container.is-Table ( display: table; ) .is-Table .Table-Cell ( display: table-cell; vertical-align: middle; ) .is-Table .Center-Block ( lățime: 50%; marja: 0 auto; )
Avantaje:

• Înălțime variabilă
• Aspectul nu funcționează când există o cantitate mare de text într-un bloc
• Compatibilitate între browsere

Defecte:

• Structură complexă

Flexbox

Viitorul CSS, flexbox va rezolva multe dintre problemele de aspect de astăzi. Acest lucru este scris în detaliu într-un articol Smashing Magazine numit Centrarea elementelor cu Flexbox.

Pos-Container.is-Flexbox ( display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; - moz-box-align: centru; -ms-flex-align: centru; -webkit-align-items: centru; align-items: centru; -webkit-box-pack: centru; -moz-box-pack: centru; -ms-flex-pack: centru; -webkit-justify-content: centru; justify-content: centru; )
Avantaje:

• Conținutul poate avea orice înălțime sau lățime
• Poate fi folosit în cazuri mai complexe

Defecte:

• Nu există suport pentru IE 8-9
• Necesită container sau stiluri în corp
• Necesită o mare varietate de prefixe pentru a funcționa corect în browserele moderne
• Posibile probleme de performanță

Concluzie

Fiecare metodă are avantaje și dezavantaje. În esență, alegerea se reduce la alegerea browserelor care ar trebui să fie acceptate