Css vertical align не работает: Разбираемся с vertical-align — Веб-стандарты
Разбираемся с vertical-align — Веб-стандарты
«Опять vertical-align
не работает!» — вздохнёт веб-разработчик.
CSS-свойство vertical-align
— одно из тех, которые с виду очень просты, но могут вызвать вопросы у начинающих разработчиков. Я думаю, что даже у многих ветеранов CSS когда-то были проблемы с тем, чтобы его до конца понять.
В этой статье я постараюсь в понятной форме рассказать про это свойство.
Чего оно не делает#
Распространенное заблуждение о vertical-align
состоит в том, что применяясь к одному элементу, оно заставляет все элементы внутри него изменить свою вертикальную позицию. Например, когда элементу задан vertical-align: top
, это подразумевает, что его содержимое поднимется к его же верхней границе.
Вспоминаются времена, когда мы делали раскладки на основе таблиц:
<td valign="top">
Что-нибудь…
</td>
В данном примере с ячейкой таблицы использование свойства valign
(в настоящее время исключенного из HTML5) приведёт к тому, что элементы внутри ячейки прижмутся к её верху. И естественно, когда верстальщики начинают использовать vertical-align
, они думают, что получится то же самое, и содержимое элемента выровняется в соответствии со значением свойства.
Но vertical-align
работает не так.
Чем оно является на самом деле#
Использование свойства vertical-align
может быть разбито на три простых для понимания правила:
- Оно применяется только к строчным элементам
inline
или строчным блокамinline-block
. - Оно влияет на выравнивание самого элемента, а не его содержимого (кроме случаев, когда применяется к ячейкам таблицы).
- Когда оно применяется к ячейке таблицы, выравнивание влияет на содержимое ячейки, а не на неё саму.
Иными словами, следующий код не даст никакого эффекта:
div {
vertical-align: middle; /* эта строка бесполезна */
}
Почему? Потому что <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
принимает числовые и процентные значения. Однако это так, и вот примеры их использования:
input {
vertical-align: 100px;
}
span {
vertical-align: 50%;
}
img {
vertical-align: -300px;
}
Несмотря на то, что вы можете прочитать в спецификации раздел, описывающий, какие есть ключевые слова и значения, я думаю, гораздо полезней будет самостоятельно поиграть с ними и сравнить результаты.
Заключение#
Если в одной фразе подводить итог о том, как использовать это традиционно неправильно понимаемое свойство, я бы сказал:
Свойство vertical-align
работает только со строчными элементами или строчными блоками и ячейками таблицы. В случае применения не к ячейкам таблицы, оно действует на сам элемент, а не на его содержимое.
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; /* текст останется в центре */
}
Аналогично и с фиксированной высотой. Вручную ставим оптимальный отступ до тех пор, пока элементы не займут оптимальную позицию. Отличием от примера выше является то, что элементы не будут находиться по центру.
Разбираемся с 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 подчиняется трем правилам:
- Применяется только к inline или inline-block элементам
- Оно влияет на выравнивание самого элемента, а не его содержимого (исключение, когда свойство применяется к ячейкам таблицы)
- Когда применяется к ячейкам таблицы, значение влияет на содержимое, а не на саму ячейку.
Другими словами, следующий код не будет иметь никакого эффекта:
div { vertical-align: middle; /* ничего не делает */ }
Почему? Потому что <div> блочный элемент (block, а не inline). Конечно, вы можете конвертировать <div> в inline или inline-block элемент, тогда vertical-align будет иметь эффект.
С другой стороны, при правильном использовании (на inline или inline-block блок элемента), вертикальное выравнивание выровняет целевой элемент по отношению к другим элементам.
Как высоко вверх или вниз элемент будет выравнен зависит от размеров встроенных элементов на той же линии.
Немного визуализации
Вот наглядная демонстрация вместе с пояснительным текстом, чтобы помочь вам понять, что происходит, когда вы используете вертикальное выравнивание встроенных элементов:
Как видно, 3 левых элемента наседают на нашу воображаемую линию, а правый элемент со свойством vertical-align: top прижимается к верхней воображаемой линии. Воображаемая линия варьируется в зависимости от размеров элементов.
Автор статьи: Alex. Категория: CSS
Дата публикации: 26.03.2013
Свойство vertical-align — Блог HTML Academy
Свойство vertical-align
управляет вертикальным выравниванием элементов внутри своих родителей. Оно применяется к строчным элементам и к ячейкам таблиц. У него десять возможных значений:
baseline
sub
super
text-top
text-bottom
middle
top
bottom
- указание расстояния
- указание процентов
Типографские единицы измерения
Разные значения свойства vertical-align
зависят от определённых типографских единиц измерения. Поэтому, чтобы понимать эти значения, для начала нужно понять эти единицы изменения. Существует семь таких единиц, на которых базируются значения свойства.
Типографские единицы измерения
Цвет | Единица | Описание |
---|---|---|
baseline | базовая линия шрифта | |
subscript baseline | базовая линия нижнего индекса строки | |
superscript baseline | базовая линия верхнего индекса строки | |
x height | высота буквы «x» шрифта | |
line height | высота строки | |
font top | верхняя линия, верхняя граница шрифта | |
font bottom | нижняя линия, нижняя граница шрифта |
Значения
Свойство vertical-align
устанавливает вертикальное выравнивание строчным элементам или ячейкам таблицы согласно этим типографским единицам. В зависимости от того, к какому элементу они применяются (строчному или к ячейке таблицы), значения могут иметь немного разный смысл.
Baseline (базовая линия)
Значение baseline
для строчных элементов выравнивает базовую линию текущего элемента по базовой линии родительского. В примере ниже, у квадрата следующие стили:
Базовая линия для строчных элементов
Для табличных элементов свойство выравнивает содержимое ячейки по базовой линии всех других ячеек в этой строке, выравненных по базовой линии в одном ряду. В примере ниже у всех ячеек в подсвеченной строке установлено значение baseline
.
Базовая линия для ячеек таблицы
Sub
Значение sub
для строчных элементов выравнивает базовую линию текущего элемента по базовой линии нижнего индекса родительского элемента.
Значение sub
для строчных элементов
Для табличных элементов это значение приводит к такому же результату, как и baseline
.
Super
Значение super
для строчных элементов выравнивает базовую линию текущего элемента по базовой линии верхнего индекса родительского элемента.
Значение super
для строчных элементов
Для табличных элементов это значение приводит к такому же результату, как и baseline
.
Text-top
Значение text-top
для строчных элементов выравнивает верхнюю границу текущего элемента по верхней линии шрифта родительского элемента.
Значение text-top
для строчных элементов
Для табличных элементов это значение приводит к такому же результату, как и baseline
.
Text-bottom
Значение text-bottom
для строчных элементов выравнивает нижнюю границу текущего элемента по нижней границе шрифта родительского элемента.
Значение text-bottom
для строчных элементов
Для табличных элементов это значение приводит к такому же результату, как и baseline
.
Middle
Значение middle
для строчных элементов выравнивает середину текущего элемента по середине родительского элемента. Середина родительского элемента подсчитывается следующим образом: берётся высота символа x, делится пополам и добавляется к базовой линии.
Значение middle
для строчных элементов
Для табличных элементов это значение выравнивает содержимое текущей ячейки по центру строки с учётом внутренних отступов (padding-box).
Значение middle
для ячеек таблицы
Top
Значение top
для строчных элементов выравнивает верхнюю границу текущего элемента по верхней границе всей строки, на которой находится элемент. Это значение не обязательно связано со шрифтовыми элементами в строке.
Значение top
для строчных элементов
Для табличных элементов это значение выравнивает содержимое текущей ячейки по верхнему краю строки с учётом внутреннего отступа.
Значение top
для ячеек таблицы
Bottom
Значение bottom
для строчных элементов выравнивает нижнюю границу текущего элемента по нижней границе всей строки, на которой находится элемент.
Значение bottom
для строчных элементов
Для табличных элементов это значение выравнивает содержимое текущей ячейки по нижнему краю строки с учётом внутреннего отступа.
Значение bottom
для ячеек таблицы
Расстояние
Указанное значение для строчных элементов передвигает базовую линию текущего элемента на указанное расстояние относительно базовой линии родительского элемента. На примере ниже, розовый квадрат имеет следующие стили:
Смещение базовой линии с помощью указания расстояния
Для табличных элементов это значение приводит к такому же результату, как и baseline
.
Проценты
Указание значения в процентах для строчных элементов передвигает базовую линию текущего элемента относительно базовой линии родительского элемента на расстояние, равное заданному проценту от высоты строки родительского элемента. На примере ниже, розовый квадрат имеет следующие стили:
Смещение базовой линии с помощью указания процентов
Для табличных элементов это значение приводит к такому же результату, как и baseline
.
Обзор CSS-свойства vertical-align | Очередной блог фрилансера
Довольно часто от веб-разработчиков можно услышать возмущенный возглас: “vertical-align не работает!”. Несмотря на то, что назначение этого свойства следует из его названия, на практике, начинающие разработчики, равно как и многие ветераны CSS, часто испытывают трудности с его применением.
В сегодняшней статье, я постараюсь раскрыть все непонятные моменты этого CSS-свойства.
Чего не делает vertical-align
Наиболее распространенное заблуждение относительно свойства vertical-align состоит в том, что оно влияет на вертикальное выравнивание всех дочерних элементов контейнера, к которому применяется. Например, если мы применим к контейнеру свойство vertical-align: top, предполагается, что все содержимое контейнера будет выровнено по верхнему краю контейнера.
Это напоминает мне старые, добрые времена табличной верстки:
<td valign="top"> Содержимое ячейки.. </td>
В этом примере табличной ячейки, свойство valign (сейчас уже запрещенное в HTML5), действительно прижмет все содержимое ячейки к верхнему краю. Возможно исходя из этого, CSS-разработчики ожидают похожего эффекта, от применения свойства vertical-align.
Но свойство vertical-align так не работает.
Как на самом деле работает vertical-align
Свойство vertical-align можно разделить на три простых правила:
- Оно применяется только к элементам со свойствами display: inline; и display: inline-block;
- Оно влияет на положение самого элемента, а не его содержимого (за исключением табличных ячеек)
- Когда оно применяется к табличной ячейке, то влияет на содержимое ячейки, а не на саму ячейку.
Другими словами, следующий код не будет иметь никакого эффекта:
div { vertical-align: middle; /* эта строка не будет работать */ }
Почему? Потому что <div> — это блочный элемент. Конечно, если вы измените у дива свойство display, на inline, или inline-block, vertical-align сразу заработает.
Правильное использование свойства vertical-align, поможет выровнять строчный элемент относительно других строчных элементов на странице. Насколько высоко или низко расположится элемент по вертикали, будет зависеть от размера соседних строчных элементов, или от свойства line-height, заданного для этой строки.
На картинке ниже, представлен пример того, как ведут себя строчные элементы, когда вы применяете свойство vertical-align:
Значения свойства – ключевые слова
Свойство 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-высотой”). По-хорошему, это значение следовало бы назвать “text-middle”, для правильной идентификации его механизма.
На этой демо-странице, размер текста специально увеличен, чтобы вы могли посмотреть, как именно выравниваются элементы, при значении middle. По всему выходит, что это значение, вам будет нужно гораздо реже, чем остальные.
Цифровые значения свойства
Возможно вы не знали, но vertical-align в качестве значения может принимать абсолютные и процентные значения, все приведенные ниже примеры будут правильными:
input { vertical-align: 100px; } span { vertical-align: 50%; } img { vertical-align: -300px; }
В чем разница между абсолютными значениями и ключевыми словами, можно почитать в CSS-спецификации, или (что на мой взгляд гораздо полезнее) самостоятельно попробовать различные варианты.
Перевод статьи “Understanding CSS’s vertical-align Property”, автор Louis Lazaris
vertical-align | htmlbook.ru
Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Краткая информация
Версии CSS
CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
---|---|---|---|
Описание
Выравнивает элемент по вертикали относительно своего родителя, окружающего
текста или ячейки таблицы.
Синтаксис
vertical-align: baseline|bottom|middle|sub|super|text-bottom|text-top|top|inherit | значение | проценты
Значения
- baseline
- Выравнивает базовую линию текущего элемента по базовой линии родителя. Если
родительский элемент не имеет базовой линии, то за нее принимается нижняя
граница элемента. - bottom
- Выравнивает основание текущего элемента по нижней части элемента строки,
расположенного ниже всех. - middle
- Выравнивание средней точки элемента по базовой линии родителя плюс половина
высоты родительского элемента. - sub
- Элемент изображается как подстрочный, в виде нижнего индекса. Размер шрифта
при этом не меняется. - super
- Элемент изображается как надстрочный, в виде верхнего индекса. Размер шрифта
остается прежним. - text-bottom
- Нижняя граница элемента выравнивается по самому нижнему краю текущей строки.
- text-top
- Верхняя граница элемента выравнивается по самому высокому текстовому элементу
текущей строки. - top
- Выравнивание верхнего края элемента по верху самого высокого элемента строки.
- inherit
- Наследует значение родителя.
В качестве значения также можно использовать проценты, пикселы или другие доступные
единицы. Положительное число смещает элемент вверх относительно базовой линии,
в то время как отрицательное число опускает его вниз. При использовании процентов, отсчет ведется от значения свойства line-height, при этом 0% аналогично значению baseline.
Для выравнивания по вертикали в ячейках таблицы применяются следующие значения.
- baseline
- Выравнивает базовую линию ячейки с базовой линией первой текстовой строки или другого вложенного элемента.
- bottom
- Выравнивает по нижнему краю ячейки.
- middle
- Выравнивает по середине ячейки.
- top
- Выравнивает содержимое ячейки по ее верхнему краю.
Пример
HTML5CSS2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vertical-align</title>
</head>
<body>
<div>
T<span>E</span>X и L<span
>A</span>T<span
>E</span>X
</div>
</body>
</html>
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства vertical-align
Объектная модель
[window.]document.getElementById(«elementID»).style.verticalAlign
Браузеры
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.
vertical-align | Вертикальное выравнивание текста
vertical-align
[w3.org] работает только с элементами таблицы и inline-элементами (в т.ч. с display: inline-block;
).
vertical-align
для элементов таблицы и для display: table-cell;
vertical-align
, заданное элементам таблицы, выравнивает содержимое в ячейке по вертикали.
▼
baseline
top
bottom
текст | строка1 |
<style> .demotable { background: #E7D5C0; } .demotable td { height: 150px; border: 1px dashed #E7D5C0; background: #fff5d7; vertical-align: middle; baseline; top; bottom; } </style> <table> <tr> <td><img src="http://2.bp.blogspot.com/-ucwWGxkrync/TQqQM2MIxqI/AAAAAAAABJo/241YgHBwh3Y/s72-c/Logo-Blogger.png" alt="Blogger"/> <td>текст <td><div>строка1<br>строка2</div> </table>
Строка
Базовая линия (англ. baseline, или линия шрифта) — это воображаемая линия, проходящая по нижнему краю символов без учёта свисаний, например, как у букв «ц», «д», «р», «щ».
display: table-cell;
похож на <td>
. Высота элемента с display: table-cell;
равна высоте наиболее высокого элемента с display: table-cell;
из группы. vertical-align
тут также выравнивает содержимое по вертикали, но уже по умолчанию имеет значение baseline
.
▼
middle
top
bottom
текст
строка1
строка2
<style> .demotable { background: #E7D5C0; } .demotable > div { display: table-cell; height: 150px; border: 1px dashed #E7D5C0; background: #fff5d7; vertical-align: baseline;middle;top;bottom; } </style> <div> <div><img src="http://2.bp.blogspot.com/-ucwWGxkrync/TQqQM2MIxqI/AAAAAAAABJo/241YgHBwh3Y/s72-c/Logo-Blogger.png" alt="Blogger"/></div> <div>текст</div> <div><div>строка1<br>строка2</div></div> </div>
Если элемент с display: table-cell;
нужно выровнять по высоте родителя, то родителю нужно указать display: table;
или display: inline-table;
.
▼
display: table;
текст
строка1
строка2
<style> .demotable { display: table; height: 150px; background: #E7D5C0; } .demotable > div { display: table-cell; border: 1px dashed #E7D5C0; background: #fff5d7; vertical-align: middle; } </style> <div> <div><img src="http://2.bp.blogspot.com/-ucwWGxkrync/TQqQM2MIxqI/AAAAAAAABJo/241YgHBwh3Y/s72-c/Logo-Blogger.png" alt="Blogger"/></div> <div>текст</div> <div><div>строка1<br>строка2</div></div> </div>
vertical-align
у элементов с display: inline;
, display: inline-block;
и display: inline-table;
vertical-align
у строчных тегов выравнивает по вертикали сам элемент относительно родителя, если его высота меньше высоты текущей строки родителя (свойство line-height
).
▼
top
text-top
middle
bottom
text-bottom
inherit
Отступ сверху: px
Высота элемента: px
Отступ снизу: px
<style> .sem { background: #fff5d7; line-height: 150px; font-size: 0; } .sem div { display: inline-block; font-size: medium; line-height: normal; vertical-align: baselinetoptext-topmiddlebottomtext-bottominherit ; } </style> <div><div> </div></div>
Или относительно соседних элементов, находящихся на данной строке.
▼
top
text-top
middle
bottom
text-bottom
sub
super
inherit
Элемент <sub>Текст строки x <sup>display: inline-block;
<style> b { font-size: 150%; vertical-align: baseline; top; text-top; middle; bottom; text-bottom; sub; super; inherit; } span { display: inline-block; height: 5em; } </style> <b>Элемент</b> <sub><sub></sub> Текст строки x <sup><sup></sup> <span>display: inline-block;</span> <img src="http://2.bp.blogspot.com/-ucwWGxkrync/TQqQM2MIxqI/AAAAAAAABJo/241YgHBwh3Y/s72-c/Logo-Blogger.png" alt="Blogger"/>
Практическое использование: Как сделать обтекание картинки текстом.
Или vertical-align
сам увеличивает строку родителя на значение, указанное в px
или %
.
%
px
Элемент <sub>Текст строки x <sup>display: inline-block;
<style> b { font-size: 150%; vertical-align: baseline; } span { display: inline-block; height: 100px; } </style> <b>Элемент</b> <sub><sub></sub> Текст строки x <sup><sup></sup> <span>display: inline-block;</span> <img src="http://2.bp.blogspot.com/-ucwWGxkrync/TQqQM2MIxqI/AAAAAAAABJo/241YgHBwh3Y/s72-c/Logo-Blogger.png" alt="Blogger"/>
vertical-align
не работает
Ещё раз хочу обратить внимание на то, что для inline-элементов vertical-align: middle;
:
- выравнивает сам элемент, а не его содержимое. То есть не будут желаемого результата, если
vertical-align
присвоить родителю. - выравнивает элемент только относительно других соседних элементов, если для родителя не указана
line-height
. То есть у родителя должно быть два и более дочерних элементов.
у родителя
без соседей
ура, оно!
<style> .parent { min-height: 150px; background: #E7D5C0; text-align: center; vertical-align: middle; display: inline-block; width: 100%; } .parent div { max-width: 300px; width: 100%; height: 100px; background: #fff5d7; text-align: left; display: inline-block; vertical-align: middle; vertical-align: middle; } .parent:before { content: ""; display: inline-block; min-height: inherit; height: 100%; vertical-align: middle; } </style> <div><div></div></div>
Этот вариант вертикального выравнивания текста по центру блока предпочтителен, поскольку line-height
может не поддерживаться мобильными браузерами, такими как Opera Mini [opera.com], и равнозначен с display: table-cell;
.
css vertical-align не работает — qaru Переполнение стека
- Около
Продукты
- Для команд
Переполнение стека
Общественные вопросы и ответы
Переполнение стека для команд
Где разработчики и технологи делятся частными знаниями с коллегами
Вакансии
Программирование и связанные с ним технические возможности карьерного роста
Талант
Нанимайте технических специалистов и создавайте свой бренд работодателя
Реклама
Обратитесь к разработчикам и технологам со всего мира
.
css — Vertical-Align не работает
Переполнение стека
- Около
Продукты
- Для команд
Переполнение стека
Общественные вопросы и ответы
Переполнение стека для команд
Где разработчики и технологи делятся частными знаниями с коллегами
Вакансии
Программирование и связанные с ним технические возможности карьерного роста
Талант
Нанимайте технических специалистов и создавайте свой бренд работодателя
Реклама
Обратитесь к разработчикам и технологам со всего мира
- О компании
Загрузка…
- Авторизоваться
зарегистрироваться текущая связь
.
css — Вертикальное выравнивание не работает для пользовательского элемента управления
Переполнение стека
- Около
Продукты
- Для команд
Переполнение стека
Общественные вопросы и ответы
Переполнение стека для команд
Где разработчики и технологи делятся частными знаниями с коллегами
Вакансии
Программирование и связанные с ним технические возможности карьерного роста
Талант
Нанимайте технических специалистов и создавайте свой бренд работодателя
Реклама
Обратитесь к разработчикам и технологам со всего мира
.
css — Вертикальное выравнивание среднего текста в div не работает
Переполнение стека
- Около
Продукты
- Для команд
Переполнение стека
Общественные вопросы и ответы
Переполнение стека для команд
Где разработчики и технологи делятся частными знаниями с коллегами
Вакансии
Программирование и связанные с ним технические возможности карьерного роста
Талант
Нанимайте технических специалистов и создавайте свой бренд работодателя
Реклама
Обратитесь к разработчикам и технологам со всего мира
- О компании
.
Продукты
Переполнение стека
Общественные вопросы и ответы
Переполнение стека для команд
Где разработчики и технологи делятся частными знаниями с коллегами
Вакансии
Программирование и связанные с ним технические возможности карьерного роста
Талант
Нанимайте технических специалистов и создавайте свой бренд работодателя
Реклама
Обратитесь к разработчикам и технологам со всего мира
Продукты
Переполнение стека
Общественные вопросы и ответы
Переполнение стека для команд
Где разработчики и технологи делятся частными знаниями с коллегами
Вакансии
Программирование и связанные с ним технические возможности карьерного роста
Талант
Нанимайте технических специалистов и создавайте свой бренд работодателя
Реклама
Обратитесь к разработчикам и технологам со всего мира
зарегистрироваться
текущая связь
Продукты
Переполнение стека
Общественные вопросы и ответы
Переполнение стека для команд
Где разработчики и технологи делятся частными знаниями с коллегами
Вакансии
Программирование и связанные с ним технические возможности карьерного роста
Талант
Нанимайте технических специалистов и создавайте свой бренд работодателя
Реклама
Обратитесь к разработчикам и технологам со всего мира
Продукты
Переполнение стека
Общественные вопросы и ответы
Переполнение стека для команд
Где разработчики и технологи делятся частными знаниями с коллегами
Вакансии
Программирование и связанные с ним технические возможности карьерного роста
Талант
Нанимайте технических специалистов и создавайте свой бренд работодателя
Реклама
Обратитесь к разработчикам и технологам со всего мира