Why This Damn Vertical-Align Is Not Working (CSS)
Yeah! Why the hell does the CSS property vertical-align never work?
The Answer has three parts:
1) First, vertical-align aligns elements relative to the dimensions of the line the element appears in.
Nope, not relative to the container element. See?
Fire up the dev tools to poke around in the markup of the example!
But here’s also a simplified version of it:
On to rule number 2 of vertical-align :
2) The line changes its height to house all the elements it contains. The minimum height of a line is the line-height . This is also its default height.
Alright, then let’s add a tall inline-block to the mix and see what happens:
And that already fucks up our layout. Sigh… Well, at least top and bottom still behave as expected. But middle is definitely not in the middle.
But, you can see, the line got taller.
Fixing the layout brings us to consideration three.
3) The baseline of a line is placed where ever it needs to be to fulfill the alignment.
Without an explicit alignment the bar is placed on top of the baseline (the blue line). Since it is so tall it pushes the baseline down and takes the middle text with it. But why does the baseline even play a role when aligning with the middle? Because vertical-align: middle places elements relative to the baseline according to the formula baseline + x-height/2 . middle means alignment with the middle of the line’s text. And this text sits on the baseline.
To move the baseline up again, we need to align the bar itself with vertical-align: middle .
Inspired by the explanation and examples above you should now be able to figure out why vertical-align does not work in your particular situation.
For an even deeper look at vertical-align you might want to read Vertical-Align: All You Need To Know.
I’m a freelance web consultant and developer who gets new projects off the ground and builds them into sustainable products.
CSS — разбираемся почему не работает vertical-align
Vertical-align — одно из самых сомнительных CSS свойств, которое, вроде-бы и работает, но по факту, из-за своих специфических требований — нет. Давайте разбираться, почему так происходит и что нужно, чтобы оно заработало
Многие все еще помнят те времена, когда в верстке повсеместно использовались таблицы, к ячейкам которых применялись:
По умолчанию все элементы центрируются по центру вертикальной оси и такой трюк поднимает все элементы внутри ячейки вверх. В CSS свойство vertical-align работает частично так же, но подчиняется трем правилам:
- Применяется только к inline или inline-block элементам;
- Выравнивает лишь элемент, к которому применяется, а его содержимое не трогает;
- В таблицах наоборот. влияет на содержимое, а ячейку не трогает;
Это значит, что код ниже абсолютно ничего не делает, т.к. первый пункт не выполнен – не задан тип блока.
Ну а если нет возможности указать inline или inline-block блок, то на помощь всегда придут padding и margin. Пример ниже для не фиксированной высоты блока, где мы отступами отрегулируем оптимальную высоту и элементы останутся в центре и на этом конец.
Аналогично и с фиксированной высотой. Вручную ставим оптимальный отступ до тех пор, пока элементы не займут оптимальную позицию. Отличием от примера выше является то, что элементы не будут находиться по центру.
Разбираемся с vertical-align
«Опять vertical-align не работает!» — вздохнёт веб-разработчик.
CSS-свойство vertical-align — одно из тех, которые с виду очень просты, но могут вызвать вопросы у начинающих разработчиков. Я думаю, что даже у многих ветеранов CSS когда-то были проблемы с тем, чтобы его до конца понять.
В этой статье я постараюсь в понятной форме рассказать про это свойство.
Чего оно не делает Скопировать ссылку
Распространенное заблуждение о vertical-align состоит в том, что применяясь к одному элементу, оно заставляет все элементы внутри него изменить свою вертикальную позицию. Например, когда элементу задан vertical-align: top , это подразумевает, что его содержимое поднимется к его же верхней границе.
Вспоминаются времена, когда мы делали раскладки на основе таблиц:
В данном примере с ячейкой таблицы использование свойства valign (в настоящее время исключенного из HTML5) приведёт к тому, что элементы внутри ячейки прижмутся к её верху. И естественно, когда верстальщики начинают использовать vertical-align , они думают, что получится то же самое, и содержимое элемента выровняется в соответствии со значением свойства.
Но vertical-align работает не так.
Чем оно является на самом деле Скопировать ссылку
Использование свойства vertical-align может быть разбито на три простых для понимания правила:
- Оно применяется только к строчным элементам inline или строчным блокам inline-block .
- Оно влияет на выравнивание самого элемента, а не его содержимого (кроме случаев, когда применяется к ячейкам таблицы).
- Когда оно применяется к ячейке таблицы, выравнивание влияет на содержимое ячейки, а не на неё саму.
Иными словами, следующий код не даст никакого эффекта:
Почему? Потому что <div> — это не строчный элемент и даже не строчный блок. Конечно, если вы сделаете его строчным или строчным блоком, то применение vertical-align даст желаемый эффект.
С другой стороны, при правильном применении (к строчному элементу или строчному блоку), свойство vertical-align заставит текущий элемент выровняться относительно других строчных элементов.
Выше или ниже расположится элемент, будет зависеть от высоты строчных элементов на этой же строке или от свойства line-height , заданного для неё.
Несколько картинок Скопировать ссылку
Вот картинка с пояснительным текстом, которая поможет вам понять, что происходит при вертикальном выравнивании строчных элементов:
А вот пример, в котором есть несколько строчных элементов, один из которых прижат к верху.
Ключевые слова Скопировать ссылку
Несколько ключевых слов, которые можно задавать в качестве значений для свойства vertical-align :
- baseline , значение по умолчанию или «изначальное»
- bottom
- middle
- sub
- super
- text-bottom
- text-top
- top
Возможно, многие из них вы не будете использовать, но было бы неплохо знать все имеющиеся варианты. Например, на демо-странице, из-за того что значение vertical-align для <input> установлено как top , он выровнен по самому высокому элементу в строке (большой картинке).
Однако если вы не хотите выравнивать элемент относительно картинок или других строчных элементов, обладающих блочными свойствами, вы можете выбрать значение text-top или text-bottom , тогда элементы будут выравниваться относительно текста в строке.
О ключевом слове middle Скопировать ссылку
К сожалению, правило vertical-align: middle не выровняет строчный элемент по середине самого высокого элемента в строке (как вы, возможно, ожидали). Вместо этого значение middle заставит элемент выровняться по середине высоты гипотетической строчной буквы «x» (так же называемой x-height). Потому, мне кажется, что это значение на самом деле должно называться text-middle , чтобы стало понятно, какой будет результат.
Взгляните на пример, где я увеличил размер шрифта так, чтобы размер x-height стал гораздо больше. После этого станет понятно, что значение middle не получится использовать очень часто.
Числовые значения Скопировать ссылку
Возможно, вы не знали о том, что vertical-align принимает числовые и процентные значения. Однако это так, и вот примеры их использования:
Несмотря на то, что вы можете прочитать в спецификации раздел, описывающий, какие есть ключевые слова и значения, я думаю, гораздо полезней будет самостоятельно поиграть с ними и сравнить результаты.
Заключение Скопировать ссылку
Если в одной фразе подводить итог о том, как использовать это традиционно неправильно понимаемое свойство, я бы сказал:
Свойство vertical-align работает только со строчными элементами или строчными блоками и ячейками таблицы. В случае применения не к ячейкам таблицы, оно действует на сам элемент, а не на его содержимое.
Разбираемся с CSS свойством vertical-align
«Vertical-align не работает!», — закричит web-разработчик.
Vertical-align является одной из тех особенностей CSS, которая звучит довольно очевидно, но может вызвать проблемы у начинающих разработчиков. Я думаю, что даже многие ветераны CSS сталкиваются с проблемами с этим свойством время от времени.
В этой статья я попытаюсь рассказать все в наиболее понятной форме.
Что оно не делает?
Наиболее неправильное представление о vertical-align это то, что если оно применено к элементу, то все элементы внутри этого элемента изменят свое вертикальное положение. Пример, когда мы используем vertical-align: top на элемент, то содержимое элемента поднимется в самый верх данного элемента.
Это напоминает мне то, как мы это делали в дни, когда повсеместно использовалась табличная верстка:
В данном табличном случае свойство valign (устаревшее) поднимет все содержимое в td-элементе наверх.
Поэтому, естественно, когда CSS разработчики начинают использовать вертикальное выравнивание, они предполагают, что оно будет работать так же — что содержание элементов выстроится в соответствии со значением свойства.
Но vertical-align так не работает!
Как на самом деле работает vertical-align?
Свойство vertical-align подчиняется трем правилам:
- Применяется только к inline или inline-block элементам
- Оно влияет на выравнивание самого элемента, а не его содержимого (исключение, когда свойство применяется к ячейкам таблицы)
- Когда применяется к ячейкам таблицы, значение влияет на содержимое, а не на саму ячейку.
Почему? Потому что <div> блочный элемент (block, а не inline). Конечно, вы можете конвертировать <div> в inline или inline-block элемент, тогда vertical-align будет иметь эффект.
С другой стороны, при правильном использовании (на inline или inline-block блок элемента), вертикальное выравнивание выровняет целевой элемент по отношению к другим элементам.
Как высоко вверх или вниз элемент будет выравнен зависит от размеров встроенных элементов на той же линии.
Немного визуализации
Вот наглядная демонстрация вместе с пояснительным текстом, чтобы помочь вам понять, что происходит, когда вы используете вертикальное выравнивание встроенных элементов:
Как видно, 3 левых элемента наседают на нашу воображаемую линию, а правый элемент со свойством vertical-align: top прижимается к верхней воображаемой линии. Воображаемая линия варьируется в зависимости от размеров элементов.