Alinierea înălțimii la centru css. Alinierea verticală în div. Bonus: comentarii condiționate

Există mai multe moduri fundamental diferite de a centra un obiect pe verticală folosind CSS, dar alegerea celui potrivit poate fi dificilă. Ne vom uita la unele dintre ele și vom face, de asemenea, un mic site web folosind cunoștințele acumulate.

Alinierea pe centru vertical nu este ușor de realizat folosind CSS. Există multe moduri și nu toate funcționează în toate browserele. Să ne uităm la 5 metode diferite și la avantajele și dezavantajele fiecăreia. Exemplu.

1a metoda

Această metodă presupune că setăm un element

metoda de afișare ca tabel, după aceea putem folosi proprietatea vertical-align în ea (care funcționează diferit în diferite elemente).

Câteva informații utile care ar trebui să fie centrate.

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

Pro

Conținutul se poate schimba dinamic înălțimea (înălțimea nu este definită în CSS).
Conținutul nu este întrerupt dacă nu există spațiu suficient pentru el.

Contra

Nu funcționează în IE 7 sau mai puțin
O mulțime de etichete imbricate

a 2-a metoda

Această metodă folosește poziționarea absolută a div-ului, cu partea superioară setată la 50% și margine-top minus jumătate din înălțimea conținutului. Aceasta implică faptul că obiectul trebuie să aibă o înălțime fixă, care este definită în stilurile CSS.

Deoarece înălțimea este fixă, puteți seta overflow:auto; pentru un div care conține conținut, astfel, dacă conținutul nu se potrivește, vor apărea bare de defilare.

Conținut aici

#conținut (poziția: absolut; sus: 50%; înălțime: 240px; margin-top: -120px; /* minus jumătate din înălțime */ )

Pro

Funcționează în toate browserele.
Nu există cuibări inutile.

Contra

Când nu este suficient spațiu, conținutul dispare (de exemplu, div-ul este în interiorul corpului și utilizatorul a făcut ferestrele mai mici, caz în care barele de defilare nu vor apărea.

a 3-a metoda

În această metodă, vom încheia conținutul div cu un alt div. Să-i setăm înălțimea la 50% (înălțime: 50%;) și marginea de jos la jumătate din înălțime (margin-bottom:-contentheight;). Conținutul va pluti și va fi centrat.

aici este continutul

#floater( float: stânga; înălțime: 50%; margin-bottom: -120px; ) #conținut( clar: ambele; înălțime: 240px; poziție: relativă; )

Pro

Funcționează în toate browserele.
Când nu există suficient spațiu (de exemplu, când fereastra este redusă), conținutul nu este decupat, vor apărea bare de defilare.

Contra

Nu mă pot gândi decât la un singur lucru: că se folosește un element gol suplimentar.

Metoda a 4-a.

Această metodă utilizează proprietatea position:absolute; pentru un div cu dimensiuni fixe (lățime și înălțime). Apoi îi setăm coordonatele de sus:0; jos:0; , dar din moment ce are o înălțime fixă, nu se poate întinde și este aliniată la centru. Aceasta este foarte asemănătoare cu metoda binecunoscută de centrare orizontală a unui element bloc cu lățime fixă (marja: 0 auto;).

Informații importante.

#conținut( poziție: absolut; sus: 0; jos: 0; stânga: 0; dreapta: 0; margine: automat; înălțime: 240px; lățime: 70%; )

Pro

Foarte simplu.

Contra

Nu funcționează în Internet Explorer
Conținutul va fi tăiat fără bare de defilare dacă nu există suficient spațiu în container.

Metoda a 5-a

Folosind această metodă, puteți centra o linie de text. Pur și simplu setăm înălțimea textului (linie-înălțime) egală cu înălțimea elementului (înălțimea). După aceasta, linia va fi afișată în centru.

O oarecare linie de text

#conținut( înălțimea: 100px; înălțimea liniei: 100px; )

Pro

Funcționează în toate browserele.
Nu taie textul dacă nu se potrivește.

Contra

Funcționează numai cu text (nu funcționează cu elemente de bloc).
Dacă există mai multe rânduri de text, arată foarte rău.

Această metodă este foarte utilă pentru elementele mici, cum ar fi centrarea textului într-un buton sau câmp de text.

Acum știi cum să obții alinierea verticală la centru, hai să creăm un site web simplu care va ajunge să arate așa:

Pasul 1

Este întotdeauna bine să începeți cu marcajul semantic. Pagina noastră va fi structurată după cum urmează:

#floater (pentru a centra conținutul)
#centrat (element central)
- #partea
  - #logo
  - #nav (lista
  - #conţinut
- #bottom (pentru drepturi de autor și toate astea)
Să scriem următorul marcaj html:
O companie centrată
O companie
- Acasă
- Produse
- Blog
- Contact
- Despre
Titlul paginii

Reproiectează holistic externalizarea cu valoare adăugată după colaborarea centrată pe proces și partajarea ideilor.

Simplificați din punct de vedere energetic piețele de nișă cu impact prin imperativele activate. Predominați holistic inovația premium după scenarii convingătoare. Recaptiualizați fără probleme standarde înalte în capitalul uman cu produse fabricate de vârf. Distribuiți în mod distinct schemele conforme cu standardele înaintea vortalurilor robuste. Recaptiualizați în mod unic gradul de pregătire a web-ului în raport cu informațiile disponibile.

Îmbrățișați eficient pregătirea personalizată pentru web, mai degrabă decât procesele direcționate către client. Creșteți în mod asertiv imperativele multiplatforme față de tehnologiile proactive. Împuterniciți în mod convenabil meta-servicii multidisciplinare fără interfețe la nivel de întreprindere.
Simplificați convenabil domeniile tematice strategice competitive cu piețe electronice concentrate. Sindicați fosfluorescent comunități de clasă mondială față de piețele cu valoare adăugată. Reinventează în mod corespunzător serviciile holistice înaintea serviciilor electronice robuste.

Notificarea privind drepturile de autor ajunge aici

Pasul 2
Acum vom scrie cel mai simplu CSS pentru a plasa elemente pe pagină. Ar trebui să salvați acest cod într-un fișier style.css. În acest sens este scris linkul în fișierul html.
Html, corp ( margine: 0; umplutură: 0; înălțime: 100%; ) corp ( fundal: url("page_bg.jpg") 50% 50% no-repeat #FC3; font-family: Georgia, Times, serif; ) #floater ( poziție: relativă; float: stânga; înălțime: 50%; margine-jos: -200px; lățime: 1px; ) #centrat (poziția: relativ; clar: stânga; înălțime: 400px; lățime: 80%; max. -width: 800px; min-width: 400px margin: 0 auto: 4px solid #666 ) #bottom (poziție: absolut; dreapta: 0; ) ; umplutură: 20px;

Înainte de a ne alinia centrul de conținut, trebuie să setăm înălțimea corpului și html la 100%. Deoarece înălțimea este calculată fără umplutură internă și externă (padding și margine), le setăm (padding) la 0, astfel încât să nu existe bare de defilare.

Marja de jos pentru un element „plutitor” este egală cu minus jumătate din înălțimea conținutului (400px), și anume -200px ;

Pagina ta ar trebui să arate acum cam așa:

Deoarece elementul #centrated are poziție:setul relativ, putem folosi poziționarea absolută a elementelor din el. Apoi setați overflow:auto; pentru elementul #content, astfel încât să apară bare de defilare dacă conținutul nu se potrivește.

Pasul 3

Ultimul lucru pe care îl vom face este să adăugăm ceva stil pentru a face pagina să arate puțin mai atractivă. Să începem cu meniul.
#nav ul ( list-style: none; padding: 0; margin: 20px 0 0 0; text-indent: 0; ) #nav li ( padding: 0; margin: 3px; ) #nav li a ( display: block; culoare de fundal: #e8e8e8; margine: 0; margine de jos: 1px; conținut: „"” : #777; ) #nav li a:hover::after ( marjă: 0 0 0 7px; culoare: #f93; ) #nav li a:activ ( padding: 8px 7px 7px; )
Primul lucru pe care l-am făcut pentru a face meniul să arate mai bine a fost să eliminăm marcatorii prin setarea atributului list-style:none și, de asemenea, să setăm umplutura și umplutura, deoarece acestea variază foarte mult în mod implicit în diferite browsere.

Observați că am specificat apoi că legăturile ar trebui redate ca elemente bloc. Acum, când sunt afișate, acestea sunt întinse pe toată lățimea elementului în care se află.

Un alt lucru interesant pe care l-am folosit pentru meniu sunt pseudo-clasele:before și:after. Ele vă permit să adăugați ceva înainte și după un element. Aceasta este o modalitate bună de a adăuga pictograme sau simboluri, cum ar fi o săgeată la sfârșitul fiecărui link. Acest truc nu funcționează în Internet Explorer 7 și mai jos.

Pasul 4

Și nu în ultimul rând, vom adăuga câteva șuruburi designului nostru pentru și mai multă frumusețe.
#centered ( -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; ) h1, h2, h3, h4, h5, h6 (familie de fonturi: Helvetica, Arial, sans- serif; greutatea fontului: normală; culoare: #666; padding-top: 0; ) #bottom (padding: 10px; font-size: 0.7em; culoare: #f03; ) #logo (font-size: 2em; text-align: center; culoare: #999; ) #logo puternic (greutate font: normal; ) #logo span (afișare: bloc; dimensiune font: 4em; înălțime linie: 0,7 em; culoare: #666; ) p, h2, h3 ( înălțime linie: 1,6 em; ) a (culoare: #f03; )
În aceste stiluri setăm colțuri rotunjite pentru elementul #centrat. În CSS3, acest lucru se va face prin proprietatea border-radius. Acest lucru nu este încă implementat în unele browsere, în afară de utilizarea prefixelor -moz și -webkit pentru Mozilla Firefox și Safari/Webkit.

Compatibilitate

După cum probabil ați ghicit deja, principala sursă de probleme de compatibilitate este Internet Explorer:
- Elementul #floater trebuie să aibă un set de lățime
- IE 6 are umplutură suplimentară în jurul meniurilor
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 folosind „ 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","corect","fund","stânga„) din blocul interior pentru a atribui aceeași valoare, precum și „marja: auto”.

*Există o nuanță: lățimea (înălțimea) blocului interior + valoarea stânga (dreapta, jos, sus) nu trebuie să depășească dimensiunile blocului părinte. Este mai sigur să atribuiți 0 (zero) proprietăților din stânga (dreapta, jos, sus).
.example-wrapper2 ( poziție : relativă ; înălțime : 250 px ; fundal : url(space.jpg) ; ) .cat-king ( lățime : 200 px ; înălțime : 200 px ; poziție : absolut ; sus : 0 ; stânga : 0 ; jos : 0 ; dreapta : 0 ;
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 î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 " î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 „înălțimea liniei”, deoarece aceasta din urmă nu este acceptată în toate browserele.
.example-wrapper4 (înălțimea liniei: 100px; culoare: #DC09C0; fundal: #E5DAE1; înălțimea: 100px; alinierea textului: centru; )
De asemenea, este posibil să se realizeze alinierea blocului cu mai multe linii. Pentru a face acest lucru, va trebui să utilizați un bloc suplimentar de înveliș și să setați înălțimea liniei la acesta. Un bloc intern poate fi cu mai multe linii, dar trebuie să fie „inline”. Trebuie să-i aplicați „vertical-align: middle”.
.example-wrapper5 (înălțimea liniei: 160px; înălțimea: 160px; dimensiunea fontului: 0; fundal: #FF9B00; ) .example-wrapper5 .text1 (afișare: bloc inline; dimensiunea fontului: 14px; înălțimea liniei: 1.5 ; vertical-align : fundal : #FFFAF2 ;
Blocul de înveliș trebuie să aibă setat „dimensiunea fontului: 0”. Dacă nu setați dimensiunea fontului la zero, browserul va adăuga câțiva pixeli în plus. De asemenea, va trebui să specificați dimensiunea fontului și înălțimea liniei pentru blocul interior, deoarece aceste proprietăți sunt moștenite de la părinte.

Alinierea verticală în tabele

proprietate " vertical-align„ afectează și celulele tabelului. Cu valoarea setată la „middle”, conținutul din interiorul celulei este aliniat la centru. Desigur, aspectul tabelului este considerat arhaic în zilele noastre, dar în cazuri excepționale îl puteți simula prin specificarea „ afișare: tabel-celulă".

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

Proprietatea CSS vertical-align este responsabilă pentru alinierea verticală a textului și imaginilor de pe pagină. Caracteristica importantă este că funcționează numai cu elemente de tabel, elemente inline și inline-block. Sprijinit de toate browserele moderne.

Sintaxa de aliniere verticală CSS

... vertical-align : valoare ; ...
- linia de bază - alinierea la linia de bază a strămoșului (sau pur și simplu limita inferioară a părintelui)
- jos - aliniați la partea de jos a liniei (sau elementul care se află sub toate)
- mijloc - aliniați punctul de mijloc al elementului la linia de bază a părintelui plus jumătate din înălțimea părintelui
- sub - afișarea apare sub linie (arata ca un indice)
- super - afișarea are loc deasupra liniei (ca superscript)
- text-bottom - aliniați marginea de jos a elementului la marginea de jos a liniei
- text-top - aliniați marginea superioară a elementului la marginea superioară a liniei
- sus - aliniați marginea superioară a elementului cu partea superioară a celui mai înalt element din linie
- inherit - moștenește valoarea părintelui
- valoare - indicată în pixeli. Un număr pozitiv se deplasează în sus față de linia de bază. Negativ jos
- dobândă – indicată în procente. Un număr pozitiv se deplasează în sus față de linia de bază. Negativ jos
Valoarea implicită de aliniere verticală:
- linie de bază (pentru elementele în linie)
- mijloc (pentru celulele tabelului)
Alinierea verticală în tabele

Cea mai comună utilizare a vertical-align este în celulele tabelului. În etichetă
utilizați atributul valign.
Sintaxa CSS valign pentru tabele
Unde valoarea poate lua următoarele valori:
- linie de bază - alinierea la linia de bază a primei linii de text
- jos - aliniați la marginea de jos a celulei tabelului
- mijloc - alinierea la mijlocul celulei
- sus - aliniați la marginea superioară a celulei
De exemplu:

sau

Aliniați la partea de sus

Alinierea la centru

Alinierea de jos

Aliniați la partea de sus
Alinierea la centru
Alinierea de jos
Exemple cu aliniamente verticale

Exemplul 1. Valori de aliniere verticală: linie de bază, jos, sus, sub

Текст с выравниванием vert_align_baseline
Текст с выравниванием vert_align_bottom
Текст с выравниванием vert_align_top
Текст с выравниванием vert_align_sub

Пример 2. Значения vertical-align: абсолютные значения и проценты

Ниже представлены примеры вертикального выравнивания с абсолютным значением и процентами.

Преобразуется на странице в следующее:

Исходная строка. Текст с выравниванием на 10 пикселей вверх
Исходная строка. Текст с выравниванием на 5 пикселей вниз
Исходная строка. Текст с выравниванием на 50% вверх
Исходная строка. Текст с выравниванием на 30% вниз
Примечание
Значение vertical-align: middle не выравнивает строчный элемент по центру самого большого элемента в строке (что можно было бы ожидать). Вместо этого значение middle выравнивает элемент относительно гипотетичной строчной буквы "X" (также называемой x-высотой).

Для обращения к vertical-align из JavaScript нужно писать следующую конструкцию:

object.style.verticalAlign ="VALUE "
CSS ,
HTML

Я думаю, многие из вас, кому приходилось заниматься версткой, сталкивались с необходимостью выравнивать элементы по вертикали и знают, какие сложности возникают при выравнивании элемента по центру.

Да, для вертикального выравнивания в CSS есть специальное свойство vertical-align с множеством значений . Однако на практике оно работает совсем не так, как ожидается. Давайте попробуем в этом разобраться.

Сравним следующие подходы. Выравнивание с помощью:

таблицы,
отступов,
line-height ,
растягивания,
отрицательного margin ,
transform ,
псевдоэлемента,
flexbox .

Есть два элемента div , при этом один из них вложен в другой. Дадим им соответствующие классы − outer и inner .

Для начала рассмотрим случай, когда размеры внешнего и внутреннего блока известны . Добавим внутреннему элементу правило display: inline-block , а внешнему − text-align: center и vertical-align: middle .

Нпомню, что выравнивание применяется только к элементам, которые имеют режим отображения inline или inline-block .

Зададим блокам размеры, а также фоновые цвета, чтобы видеть их границы.

Outer { width: 200px; height: 200px; text-align: center; vertical-align: middle; background-color: #ffc; } .inner { display: inline-block; width: 100px; height: 100px; background-color: #fcc; }
После применения стилей мы увидим, что внутренний блок выровнялся по горизонтали, а по вертикали нет:
http://jsfiddle.net/c1bgfffq/

Почему так произошло? Дело в том, что свойство vertical-align влияет на выравнивание самого элемента, а не его содержимого (кроме случаев, когда оно применяется к ячейкам таблицы). Поэтому применение данного свойства к внешнему элементу ничего не дало. Более того, применение этого свойства к внутреннему элементу также ничего не даст, поскольку строчные блоки (inline-block) выравниваются по вертикали относительно соседних блоков, а в нашем случае у нас один строчный блок.

Для решения данной проблемы существует несколько техник. Ниже подробнее рассмотрим каждую из них.

Выравнивание с помощью таблицы

Очевидный минус данного решения – с точки зрения семантики неправильно применять таблицы для выравнивания. Второй минус в том, что для создания таблицы требуется добавить еще один элемент вокруг внешнего блока.

Первый минус можно частично убрать, заменив теги table и td на div и задав табличный режим отображения в CSS.

Выравнивание с помощью отступов

Outer { height: 200px; } .inner { height: 100px; margin: 50px 0; }
http://jsfiddle.net/c1bgfffq/6/

Минус решения - оно применимо лишь в ограниченном числе случаев, когда известны высоты обоих блоков.

Выравнивание с помощью line-height

Outer { height: 200px; line-height: 200px; } .inner { white-space: nowrap; overflow: hidden; }
http://jsfiddle.net/c1bgfffq/12/

Также данную технику можно применять и для выравнивания многострочного текста, если для внутреннего блока переопределить значение line-height , а также добавить правила display: inline-block и vertical-align: middle .

Outer { height: 200px; line-height: 200px; } .inner { line-height: normal; display: inline-block; vertical-align: middle; }
http://jsfiddle.net/c1bgfffq/15/

Минус данного способа заключается в том, что должна быть известна высота внешнего блока.

Выравнивание с помощью "растягивания"

Для этого нужно:

задать внешнему блоку относительное позиционирование, а внутреннему − абсолютное;
добавить внутреннему блоку правила top: 0 и bottom: 0 , в результате чего он растянется на всю высоту внешнего блока;
установить значение auto для вертикальных отступов внутреннего блока.

Суть этой техники заключается в том, что задание высоты для растянутого и абсолютно спозиционированного блока заставляет браузер вычислять вертикальные отступы в равном соотношении, если их значение установлено в auto .

Выравнивание с помощью отрицательного margin-top

Нужно задать внешнему блоку относительное позиционирование, а внутреннему − абсолютное. Затем необходимо сдвинуть внутренний блок вниз на половину высоты внешнего блока top: 50% и поднять вверх на половину собственной высоты margin-top: -H inner / 2.

Outer { position: relative; } .inner { height: 100px; position: absolute; top: 50%; margin-top: -50px; }
http://jsfiddle.net/c1bgfffq/13/

Минус данного способа - должна быть известна высота внутреннего блока.

Выравнивание с помощью transform

Outer { position: relative; } .inner { position: absolute; top: 50%; transform: translateY(-50%); }
http://jsfiddle.net/c1bgfffq/9/

Почему в предыдущем способе нельзя было задать значение в процентах? Так как процентные значения свойства margin вычисляются относительно родительского элемента, значение в 50% равнялось бы половине высоты внешнего блока, а нам нужно было поднять внутренний блок на половину его собственной высоты. Для этого как раз подходит свойство transform .

Минус данного способа - он не может быть применен, если внутренний блок имеет абсолютное позиционирование.

Выравнивание с помощью Flexbox

Внешнему блоку необходимо задать display: flex , а внутреннему − margin: auto . И это все! Красиво, правда?

Outer { display: flex; width: 200px; height: 200px; } .inner { width: 100px; margin: auto; }
http://jsfiddle.net/c1bgfffq/14/

Минус данного способа − Flexbox поддерживается только современными браузерами.

Какой способ выбрать?

Для вертикального выравнивания текста лучше использовать вертикальные отступы или свойство line-height .
Для абсолютно позиционированных элементов с известной высотой (например, иконок) идеально подойдет способ с отрицательным свойством margin-top .
Для более сложных случаев, когда неизвестна высота блока, нужно использовать псевдоэлемент или свойство transform .
Ну а если вам повезло настолько, что не нужно поддерживать старые версии браузера IE, то, конечно, лучше использовать Flexbox .

Часто при вёрстке возникает потребность в вертикальном выравнивании текста в блоке. Если это нужно сделать в ячейке таблицы, то задается значение CSS-свойства vertical-align.

Но возникает резонный вопрос, нельзя ли обойтись без таблицы, без перегрузки разметки страницы лишними тегами? Ответ: «можно», но из-за плохой поддержки CSS браузером MSIE решение задачи для него будет отличаться от решения для остальных распространённых браузеров.

В качестве примера рассмотрим следующий фрагмент:

Un text

ș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ă;
}
div span(
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 înălțimii la centru css. Alinierea verticală în div. Bonus: comentarii condiționate

1a metoda

Pro

Contra

a 2-a metoda

Pro

Contra

a 3-a metoda

Pro

Contra

Metoda a 4-a.

Pro

Contra

Metoda a 5-a

Pro

Contra

Pasul 1

Titlul paginii

Notificarea privind drepturile de autor ajunge aici

Pasul 3

Pasul 4

Compatibilitate

Alinierea blocurilor cu dimensiuni cunoscute

Alinierea folosind umplutură

Alinierea blocurilor poziționate absolut

Alinierea orizontală

Alinierea folosind „text-align: center”

Alinierea blocurilor folosind marginea

Alinierea verticală

Alinierea cu proprietatea înălțimea liniei

Alinierea verticală în tabele

Alinierea cu un element suplimentar în linie

Afișaj: flex și aliniere

Alinierea verticală în tabele

Exemple cu aliniamente verticale

Exemplul 1. Valori de aliniere verticală: linie de bază, jos, sus, sub

Пример 2. Значения vertical-align: абсолютные значения и проценты

Выравнивание с помощью таблицы

Выравнивание с помощью отступов

Выравнивание с помощью line-height

Выравнивание с помощью "растягивания"

Выравнивание с помощью отрицательного margin-top

Выравнивание с помощью transform

Выравнивание с помощью Flexbox

Какой способ выбрать?

Rezolvarea problemei

Browsere „corecte” (inclusiv MSIE

Internet Explorer (până la versiunea 7 inclusiv)