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 может быть разбито на три простых для понимания правила:

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

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

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 подчиняется трем правилам:

  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 прижимается к верхней воображаемой линии. Воображаемая линия варьируется в зависимости от размеров элементов.

 

Автор статьи: 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 можно разделить на три простых правила:

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

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


    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
строка2

<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>&lt;sub&gt;</sub> Текст строки x <sup>&lt;sup&gt;</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>&lt;sub&gt;</sub> Текст строки x <sup>&lt;sup&gt;</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;:

  1. выравнивает сам элемент, а не его содержимое. То есть не будут желаемого результата, если vertical-align присвоить родителю.
  2. выравнивает элемент только относительно других соседних элементов, если для родителя не указана 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 Переполнение стека
  1. Около
  2. Продукты
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
  3. Вакансии Программирование и связанные с ним технические возможности карьерного роста
  4. Талант Нанимайте технических специалистов и создавайте свой бренд работодателя
  5. Реклама Обратитесь к разработчикам и технологам со всего мира
.

css — Vertical-Align не работает

Переполнение стека
  1. Около
  2. Продукты
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
  3. Вакансии Программирование и связанные с ним технические возможности карьерного роста
  4. Талант Нанимайте технических специалистов и создавайте свой бренд работодателя
  5. Реклама Обратитесь к разработчикам и технологам со всего мира
  6. О компании

Загрузка…

  1. Авторизоваться зарегистрироваться
  2. текущая связь

.

css — Вертикальное выравнивание не работает для пользовательского элемента управления

Переполнение стека
  1. Около
  2. Продукты
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
  3. Вакансии Программирование и связанные с ним технические возможности карьерного роста
  4. Талант Нанимайте технических специалистов и создавайте свой бренд работодателя
  5. Реклама Обратитесь к разработчикам и технологам со всего мира
.

css — Вертикальное выравнивание среднего текста в div не работает

Переполнение стека
  1. Около
  2. Продукты
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
  3. Вакансии Программирование и связанные с ним технические возможности карьерного роста
  4. Талант Нанимайте технических специалистов и создавайте свой бренд работодателя
  5. Реклама Обратитесь к разработчикам и технологам со всего мира
  6. О компании
.

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

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