Valign top что это

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

Синтаксис CSS vertical-align

Где value может принимать следующие значения:

  • baseline — выравнивание по базовой линии предка (или просто нижняя граница родителя)
  • bottom — выравнивание по нижней части строки (или элемента, который располагается ниже всех)
  • middle — выравнивание средней точки элемента по базовой линии родителя плюс половина высоты родительского элемента
  • sub — отображение происходит под строкой (выглядит как подстрочный индекс)
  • super — отображение происходит над строкой (как верхний индекс)
  • text-bottom — выравнивание нижней границы элемента по нижнему краю строки
  • text-top — выравнивание верхняя границы элемента по верхнему краю строки
  • top — выравнивание верхняя края элемента по верху самого высокого элемента строки
  • inherit — наследует значение родителя
  • значение — указывается в пикселях. Положительное число смещает вверх относительно базовой линии. Отрицательное вниз
  • проценты — указывается в процетах. Положительное число смещает вверх относительно базовой линии. Отрицательное вниз

Значение vertical-align по умолчанию:

  • baseline (для строчных элементов)
  • middle (для ячеек таблицы)

Вертикальное выравнивание в таблицах

Чаще всего vertical-align используется в ячейках таблиц. В теге используют атрибут valign .

Синтаксис CSS valign для таблиц

Где value может принимать следующие значения:

  • baseline — выравнивание по базовой линии первой текстовой строки
  • bottom — выравнивание по нижнему краю ячейки таблицы
  • middle — выравнивание по середине ячейки
  • top — выравнивание верхнему краю ячейки

Преобразуется на странице в следующее:

Выравнивание по верху
Выравнивание по низу

Примеры с вертикальными выравниваниями

Пример 1. Значения vertical-align: baseline, bottom, top, sub

Пример 2. Значения vertical-align: абсолютные значения и проценты

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

Преобразуется на странице в следующее:

Исходная строка. Текст с выравниванием на 10 пикселей вверх
Исходная строка. Текст с выравниванием на 5 пикселей вниз
Исходная строка. Текст с выравниванием на 50% вверх
Исходная строка. Текст с выравниванием на 30% вниз

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

Для обращения к vertical-align из JavaScript нужно писать следующую конструкцию:

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

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

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

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

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

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

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

Читайте также:  Hp project smart ноутбук

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

Взгляните на пример, где я увеличил размер шрифта так, чтобы размер 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/ ?

Отличный перевод, только вот относительно ссылочек — не очень удобно на сайте без
Роберт7 апреля 2012 в 22:46

Читайте также:  Пылесос тефаль аир форс экстрим

Не хватает информации об особенности поведения 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 применяется к ячейке таблицы, — то оно должно влиять именно на расположение содержимого этой ячейки, однако:

коротко и полезно о веб-разработке

Обзор CSS-свойства vertical-align

Довольно часто от веб-разработчиков можно услышать возмущенный возглас: “vertical-align не работает!”. Несмотря на то, что назначение этого свойства следует из его названия, на практике, начинающие разработчики, равно как и многие ветераны CSS, часто испытывают трудности с его применением.

В сегодняшней статье, я постараюсь раскрыть все непонятные моменты этого CSS-свойства.

Чего не делает vertical-align

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

Это напоминает мне старые, добрые времена табличной верстки:

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

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

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

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

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

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

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

Правильное использование свойства 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 в качестве значения может принимать абсолютные и процентные значения, все приведенные ниже примеры будут правильными:

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

Перевод статьи “Understanding CSS’s vertical-align Property”, автор Louis Lazaris

Рассказать друзьям

Понравилась статья? Лучший способ сказать спасибо — поделиться ссылкой в социальных сетях:

«>