Почему vertical align не работает
Перейти к содержимому

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

  • автор:

Не работает vertical-align

нужный результат

Есть родительский div (зеленый на примере-рисунке) и есть два независимых div-блока с текстом и прочими элементами внутри (красный на рисунке). В левом мало текста, а во втором — много. Требуется, чтобы элементы слева всегда были посередине относительно элементов справа, как на рисунке этом:
(источник: joxi.ru) Я знаю, что для этого ворде как нужно использовать vertical-align: middle, но результат не тот, что нужен. Получается идентично как если бы я bottom написал.

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

В коде ниже используется вертикальное центрирование при помощи table-cell + vertical-align .

Почему оно не работает? Нажмите на просмотр, чтобы увидеть (стрелка должна быть в центре по вертикали).

 .arrow 

Как починить центрирование при помощи CSS? Свойства position/height менять нельзя.

Подсказка

Центрирование не работает из-за position: absolute .

Решение

Центрирование не работает потому, что position: absolute автоматически меняет элементу display на block .

В однострочном случае можно сделать центрирование при помощи line-height :

 .arrow 

Если же центрировать нужно несколько строк или блок, то есть и другие техники центрирования, которые сработают без display:table-cell .

Раз­би­ра­ем­ся с 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 даст желаемый эффект.

С другой стороны, при правильном применении (к строчному элементу или строчному блоку), свойство 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). Потому, мне кажется, что это значение на самом деле должно называться text-middle , чтобы стало понятно, какой будет результат.

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

Числовые значения Скопировать ссылку

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

input < vertical-align: 100px; >span < vertical-align: 50%; >img

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

Заключение Скопировать ссылку

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

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

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

Здравствуйте. Не работает vertical-align: middle;
Вот такая конструкция:

.div < height: 100%; */ width: 16.5%; background: #21477e; border: 1px solid #0561a4; border-radius: 7px; height: 72px; display: flex; vertical-align: middle; >a

Почему-то vertical-align вообще отказывается работать, даже другие свойства, кроме middle. В чем причина?

  • Вопрос задан более года назад
  • 141 просмотр

1 комментарий

Простой 1 комментарий

Ankhena

Ankhena @Ankhena Куратор тега CSS

Почему-то vertical-align вообще отказывается работать, даже другие свойства, кроме middle. В чем причина?

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

У вас там флекс, значит логично использовать свойства флексов. В вашем случае align-items или align-self.

Решения вопроса 1

delphinpro

Сергей delphinpro @delphinpro Куратор тега CSS
frontend developer

Это свойство для inline элементов. причем применяется оно непосредственно к элементу, а не его родителю (у вас к обоим почему-то).
У вас ссылка имеет стиль display: flex, а значит является блочной.
Можете использовать display: inline-flex, чтобы сделать элемент инлайновым (Хотя это не поможет, так как элемент являтся прямым потомком флекс-контейнера, и всегда будет блочным).
Или, раз уж у вас див является флекс-контейнером, использовать flex-свойства.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *