Почему не работает vertical align: Почему не работает vertical-align в блоке? — Хабр Q&A – Все способы вертикального выравнивания в CSS / Netcracker corporate blog / Habr

Разбираемся с CSS свойством vertical-align

«Vertical-align не работает!», — закричит web-разработчик.

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

В этой статья я попытаюсь рассказать все в наиболее понятной форме.

Что оно не делает?

Наиболее неправильное представление о vertical-align это то, что если оно применено к элементу, то все элементы внутри этого элемента изменят свое вертикальное положение. Пример, когда мы используем vertical-align: top на элемент, то содержимое элемента поднимется в самый верх данного элемента.

Это напоминает мне то, как мы это делали в дни, когда повсеместно использовалась табличная верстка:

<td valign="top">
    Whatever...
</td>

В данном табличном случае свойство valign (устаревшее) поднимет все содержимое в td-элементе наверх.

Поэтому, естественно, когда CSS разработчики начинают использовать вертикальное выравнивание, они предполагают, что оно будет работать так же — что содержание элементов выстроится в соответствии со значением свойства.

Но vertical-align так не работает!

Как на самом деле работает vertical-align?

Свойство vertical-align подчиняется трем правилам:

1. Применяется только к inline или inline-block элементам
2. Оно влияет на выравнивание самого элемента, а не его содержимого (исключение, когда свойство применяется к ячейкам таблицы)
3. Когда применяется к ячейкам таблицы, значение влияет на содержимое, а не на саму ячейку.

Другими словами, следующий код не будет иметь никакого эффекта:

div {
	vertical-align: middle; /* ничего не делает */
}

Почему? Потому что <div> блочный элемент (block, а не inline). Конечно, вы можете конвертировать <div> в inline или inline-block элемент, тогда vertical-align будет иметь эффект.

С другой стороны, при правильном использовании (на inline или inline-block блок элемента), вертикальное выравнивание выровняет целевой элемент по отношению к другим элементам.

Как высоко вверх или вниз элемент будет выравнен зависит от размеров встроенных элементов на той же линии.

Немного визуализации

Вот наглядная демонстрация вместе с пояснительным текстом, чтобы помочь вам понять, что происходит, когда вы используете вертикальное выравнивание встроенных элементов:

Как видно, 3 левых элемента наседают на нашу воображаемую линию, а правый элемент со свойством vertical-align: top прижимается к верхней воображаемой линии. Воображаемая линия варьируется в зависимости от размеров элементов.

CSS — разбираемся почему не работает vertical-align

Vertical-align — одно из самых сомнительных CSS свойств, которое, вроде-бы и работает, но по факту, из-за своих специфических требований — нет. Давайте разбираться, почему так происходит и что нужно, чтобы оно заработало

Многие все еще помнят те времена, когда в верстке повсеместно использовались таблицы, к ячейкам которых применялись:

<td valign="top">Some text...</td>

По умолчанию все элементы центрируются по центру вертикальной оси и такой трюк поднимает все элементы внутри ячейки вверх. В CSS свойство vertical-align работает частично так же, но подчиняется трем правилам:

• Применяется только к inline или inline-block элементам;
• Выравнивает лишь элемент, к которому применяется, а его содержимое не трогает;
• В таблицах наоборот. влияет на содержимое, а ячейку не трогает;

Это значит, что код ниже абсолютно ничего не делает, т.к. первый пункт не выполнен — не задан тип блока.

div {
    vertical-align: middle; /* ничего не делает */
}

Ну а если нет возможности указать inline или inline-block блок, то на помощь всегда придут padding и margin. Пример ниже для не фиксированной высоты блока, где мы отступами отрегулируем оптимальную высоту и элементы останутся в центре и на этом конец.

.div{
    font:1rem;
    padding:5px 0; /* текст останется в центре */
}

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

Почему не работает vertical align

«Опять vertical-align не работает!» — вздохнёт веб-разработчик.

CSS-свойство vertical-align — одно из тех, которые с виду очень просты, но могут вызвать вопросы у начинающих разработчиков. Я думаю, что даже у многих ветеранов CSS когда-то были проблемы с тем, чтобы его до конца понять.

В этой статье я постараюсь в понятной форме рассказать про это свойство.

Чего оно не делает

Распространенное заблуждение о vertical-align состоит в том, что применяясь к одному элементу, оно заставляет все элементы внутри него изменить свою вертикальную позицию. Например, когда элементу задан vertical-align:top , это подразумевает, что его содержимое поднимется к его же верхней границе.

Вспоминаются времена, когда мы делали раскладки на основе таблиц:

В данном примере с ячейкой таблицы использование свойства valign (в настоящее время исключенного из HTML5) приведёт к тому, что элементы внутри ячейки прижмутся к её верху. И естественно, когда верстальщики начинают использовать vertical-align , они думают, что получится то же самое, и содержимое элемента выровняется в соответствии со значением свойства.

Но vertical-align работает не так.

Чем оно является на самом деле

Использование свойства vertical-align может быть разбито на три простых для понимания правила:

1. Оно применяется только к строчным элементам inline или строчным блокам inline-block .
2. Оно влияет на выравнивание самого элемента, а не его содержимого (кроме случаев, когда применяется к ячейкам таблицы).
3. Когда оно применяется к ячейке таблицы, выравнивание влияет на содержимое ячейки, а не на неё саму.

Иными словами, следующий код не даст никакого эффекта:

Почему? Потому что

С другой стороны, при правильном применении (к строчному элементу или строчному блоку), свойство vertical-align заставит текущий элемент выровняться относительно других строчных элементов.

Выше или ниже расположится элемент, будет зависеть от высоты строчных элементов на этой же строке или от свойства line-height , заданного для неё.

Несколько картинок

Вот картинка с пояснительным текстом, которая поможет вам понять, что происходит при вертикальном выравнивании строчных элементов:

А вот пример, в котором есть несколько строчных элементов, один из которых прижат к верху.

Ключевые слова

Несколько ключевых слов, которые можно задавать в качестве значений для свойства vertical-align :

• baseline , значение по умолчанию или «изначальное»
• bottom
• middle
• sub
• super
• text-bottom
• text-top
• top

Возможно, многие из них вы не будете использовать, но было бы неплохо знать все имеющиеся варианты. Например, на демо-странице, из-за того что значение vertical-align для установлено как top , он выровнен по самому высокому элементу в строке (большой картинке).

Однако если вы не хотите выравнивать элемент относительно картинок или других строчных элементов, обладающих блочными свойствами, вы можете выбрать значение text-top или text-bottom , тогда элементы будут выравниваться относительно текста в строке.

О ключевом слове middle

К сожалению, правило vertical-align:middle не выровняет строчный элемент по середине самого высокого элемента в строке (как вы, возможно, ожидали). Вместо этого значение middle заставит элемент выровняться по середине высоты гипотетической строчной буквы «x»

Взгляните на пример, где я увеличил размер шрифта так, чтобы размер x-height стал гораздо больше. После этого станет понятно, что значение middle не получится использовать очень часто.

Числовые значения

Возможно, вы не знали о том, что vertical-align принимает числовые и процентные значения. Однако это так, и вот примеры их использования:

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

Заключение

Если в одной фразе подводить итог о том, как использовать это традиционно неправильно понимаемое свойство, я бы сказал:

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

Комментарии +

1. Roman Petrenko 9 марта 2012 в 15:21

Отлично изложено. Может быть вы выпускаете журнал на который можно подписатся. Если да то скиньте мне на имаил как можно подписаться. Еще раз спасибо!

Вы имеете в виду offline издание?
Если online, то вы можете подписаться на новости и обновления в твиттере: https://twitter.com/#!/webstandards_ru/

Отличная статья, кстати.

Роман, там вверху справа в браузере есть rss 😉

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

vertical-align у родителя сработает если у детей vertical-align: inherit;

Денис, я не очень понял что вы имеете в виду. Вы не могли бы написать и выложить кейс?
На том же http://jsfiddle.net/ ?

Отличный перевод, только вот относительно ссылочек — не очень удобно на сайте без

Не хватает информации об особенности поведения vertical-align в разных браузерах и о различных подводных камнях.

Из интересных особенностей, что недавно встречал — inline-block с overflow:hidden выравнивается по разному, в разных браузерах http://jsfiddle.net/dw8EW/12/

Роберт, это не баг, а специфицированная особенность — последняя фраза в разделе о сабже гласит:

The baseline of an ‘inline-block’ is the baseline of its last line box in the normal flow, unless . if its ‘overflow’ property has a computed value other than ‘visible’, in which case the baseline is the bottom margin edge.

Баг как раз только в Хроме, который, к сожалению, вообще неважно справляется с инлайновым форматированием (у него и проценты для vertical-align работают не по стандарту, и не только).

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

FeelGood, лучше поздно, чем никогда — CSS Box Alignment.

Я, признаться, не понимаю такое поведение:
http://jsfiddle.net/Rxu36/1/

Ситуация:
значение vertical-align у элемента span контролирует выравнивание содержимого своего родителя?

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

Спасибо, я понял.
Хотя такое псевдо-контроль можно использовать для выравнивания текста по центру, если известна высота контейнера.
http://jsfiddle.net/Rxu36/5/

Благодарю. Стыдно признаться, но тоже думал что vertical-align применяется к содержимому. ну это, на мой взгляд, логично было. но не тут то было))

Чтобы выровнять содержимое блока, надо задать свойство line-height. Тогда vertical-align будет выравнивать элементы внутри блока, как надо.

Чтобы выровнять содержимое блока, надо задать свойство line-height. Тогда vertical-align будет выравнивать элементы внутри блока, как надо.

если сделать объект display: inline-block; или просто inline и задать свойство vertical-align: middle; содержимое тоже не выравнивается!!(

Подскажите, пожалуйста, как выровнять:
Есть блок:

В него помещено построчно три ссылки на шрифт (нестандартный).
В CSS блоке:
.nav li
Как бы я не ровнял, какие бы теги не применял, первое слово в линейке остается на пару-тройку пикселей ниже. Остальные в линию.

Было: vertical-align, justify-content и много всякой отсебятины типа margins:0 ))
Пробовал с изображениями с этим шрифтом: тоже самое.

Буду крайне признателен за помощь!

Это свойство — действительно одно из самых темных в CSS. Делалось наспех, под лозунгом «долой форматирование атрибутами HTML, Вы всё это теперь можете делать через CSS». Как известно, в HTML 3.x вертикальное выравнивание возможно только для ячеек таблицы (атрибут valign, выравнивается содержимое) и для рисунков (т. е. inline-block, атрибут align, выравнивается сам рисунок). Эти особенности и были тупо скомпилированы в одно css-свойство.
Отсутствие удобных и понятных методов вертикального выравнивания вне таблиц — одна из причин, по которой народ неохотно отказывается от табличной верстки.
Вот простая задачка, с которой мне так и не удалось справиться без таблицы или введения элементов-хаков в HTML (что, на мой взгляд, куда хуже, чем table).
text
Нужно сделать, чтобы текст был справа от картинки. При этом и текст и картинка должны быть центрированы по вертикали. Текста может быть много, и в этом случае он должен растягивать div, а картинка — центрироваться или мало, и тогда все должно быть наоборот.

Прошу прощения, тэги съелись. Вот HTML к задачке:
«div» «img. » «p» text «/p» «/div»
Заменил угловые скобки кавычками, писать через амперсенды очень уж муторно.

спасибо за статью! очень помогла 🙂

Как было сказано выше, в случае если vertical-align применяется к ячейке таблицы, — то оно должно влиять именно на расположение содержимого этой ячейки, однако:

Vertical-align — Легендарное свойство, которое вроде-бы и работает, но по факту — нет! Давайте разбираться, почему так происходит и что нужно, чтобы оно заработало

Многие все еще помнят те времена, когда в верстке повсеместно использовались таблицы, к ячейкам которых применялись:

По умолчанию все элементы центрируются по центру вертикальной оси и такой трюк поднимает все элементы внутри ячейки вверх. В CSS свойство vertical-align работает частично так же, но подчиняется трем правилам:

а это значит, что код ниже абсолютно ничего не делает, т.к. первый пункт не выполнен — не задан тип блока.

Ну а если нет возможности указать inline или inline-block блок, то на помощь всегда придут padding и margin. Пример ниже для не фиксированной высоты блока, где мы отступами отрегулируем оптимальную высоту и элементы останутся в центре и на этом конец.

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

Есть родительский div (зеленый на примере-рисунке) и есть два независимых div-блока с текстом и прочими элементами внутри (красный на рисунке).

В левом мало текста, а во втором — много.

Требуется, чтобы элементы слева всегда были посередине относительно элементов справа, как на рисунке этом:

_{(источник: joxi.ru)}

Я знаю, что для этого ворде как нужно использовать vertical-align: middle, но результат не тот, что нужен. Получается идентично как если бы я bottom написал.

Почему не работает vertical-align: text-bottom?

Я не могу заставить текстовое дно работать должным образом. Из того, что я читаю, div должен быть выровнен по нижней части текста, однако он выравнивает его по нижней части, как если бы он был выровнен по «bottom».

div {
  display: inline-block;
  vertical-align: text-bottom; //same as bottom
  text-align: center;
  text-decoration: underline;
}

div:first-child {
  width: 100px;
  height: 200px;
  border: 3px solid black;
  line-height: 100px;
}

div:nth-child(2) {
  width: 50px;
  height: 50px;
  line-height: 50px;
  border: 2px solid red;
}

<div>hello</div>
<div>world</div>

div {
  display: inline-block;
  text-align: center;
  text-decoration: underline;
}

div:first-child {
  width: 100px;
  height: 200px;
  border: 3px solid black;
  line-height: 100px;
}

div:nth-child(2) {
  width: 50px;
  height: 50px;
  line-height: 50px;
  border: 2px solid red;
}

<div>hello</div>
<div>world</div>

main{
}

div {
  display: inline-block;
  text-align: center;
  text-decoration: underline;
  vertical-align: text-bottom;

}

div:first-child {
  width: 100px;
  height: 200px;
  border: 3px solid black;
  line-height: 100px;
}

div:nth-child(2) {
  width: 50px;
  height: 50px;
  line-height: 50px;
  border: 2px solid red;
}

<main>
  Text
  <div>hello</div>
  <div>world</div>
</main>

div {
  display: inline-block;
  text-align: center;
  text-decoration: underline;
}

div:first-child {
  width: 100px;
  height: 200px;
  border: 3px solid black;
  line-height: 100px;
}

div:nth-child(2) {
  width: 50px;
  height: 50px;
  line-height: 50px;
  border: 2px solid red;
  vertical-align: text-bottom; 
}

<div>hello</div>
<div>world</div>

<a><img src="http://img.brothersoft.com/icon/softimage/s/smiley.s_challenge-131939.jpeg" /></a>

a {
    display: block;
    background: #000;
    line-height: 40px;  
}
img {
    vertical-align: middle;
}

a {
    display: block;
    background: #000;
    line-height: 40px;
    height:80px;
    position:relative;  
}

img {
    position:absolute;
    top:50%;
    margin-top:-16px;
}

a {
    display: block;
    background: #000;
    line-height: 40px;  
}
img {
    vertical-align: middle;
    margin-top:-4px; /* this work for me with any given line-height or img height */
}

 <style type="text/css">
    div.parent {
         position: relative;
    }

    /*vertical middle and horizontal center align*/
    img.child {
        bottom: 0;
        left: 0;
        margin: auto;
        position: absolute;
        right: 0;
        top: 0;
    }
    </style>

    <div>
        <img> 
    </div>

a {
  display: block;
  background: #f00;
}
img {
  margin: .3em auto;
  vertical-align: middle;
}

<a>
 <img src="https://placeimg.com/30/30/any">
</a>

a {
 display: table;
 background: #000;
 height:200px;
}
div {
 display:table-cell;
 vertical-align: middle;
}

<a>
 <div>
  <img src="http://img.brothersoft.com/icon/softimage/s/smiley.s_challenge-  131939.jpeg" />
 </div>
</a>

<a href="#"></a>    
a {display:block;background:#000;line-height:40px;background:#000 url(http://img.brothersoft.com/icon/softimage/s/smiley.s_challenge-131939.jpeg) no-repeat left center;text-indent:-999px}

<html>
<head>
<title>Day4: Table King</title>
<link rel="stylesheet" type="text/css" href="stylesday4.css" />
</head>

<body>
 <table>
  <tr>
  <th><span></th>
<th>Free Version</th>
<th>Lite Version</th>
<th>Full Version</th>
 </tr>
 <tr>
  <td>Advertising</td>
  <td>X</td>
  <td><span></td>
  <td><span></td>
 </tr>
 <tr>
  <td>Catering Software</td>
  <td><span></td>
  <td>X</td>
  <td>X</td>
 </tr>

#products
{
border-collapse:collapse;
width:100%;
}
#products th, #products td
{
border:1px solid #0000FF;
background-color:#C0C0C0;
padding:3px 2px 7px 5px;
}
#products th
{
font-size:20px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
color:#0000FF;
padding-top:4px;
padding-bottom:5px;
background-color:green;
}
#products td
{
vertical-align:bottom;
}
#products tr
{
text-align:center;
color:#0000FF;
}
#products tr.alt td
{
color:blue;
background-color:#A7C942;
}

padding:3px 2px 0 5px;

<td valign="bottom">TEXT</td>