Содержание

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 — Веб-технологии для разработчиков

Свойство CSS  vertical-align описывает вертикальное позиционирование строчных элементов (inline) или ячеек таблицы (table-cell).

/* ключевые значения */
vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;

/* значения длины (<length>) */
vertical-align: 10em;
vertical-align: 4px;

/* процентные значения (<percentage>) */
vertical-align: 20%;

/* глобальные значения */
vertical-align: inherit;
vertical-align: initial;
vertical-align: unset;

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

  • Для вертикального позиционирования области строчного элемента внутри области содержащей его строки. Например, с помощью него можно вертикально позиционировать <img> в строке текста:
<p>
top:<img src="https://mdn.mozillademos.org/files/15189/star.png"/> 
middle:<img src="https://mdn.mozillademos.org/files/15189/star.png"/> 
bottom:<img src="https://mdn.mozillademos.org/files/15189/star.png"/> 
super:<img src="https://mdn.mozillademos.org/files/15189/star.png"/> 
sub:<img src="https://mdn.mozillademos.org/files/15189/star.png"/> 
</p>
<p>
text-top:<img src="https://mdn.mozillademos.org/files/15189/star.png"/> 
text-bottom:<img  src="https://mdn.mozillademos.org/files/15189/star.png"/>
0.2em:<img src="https://mdn.mozillademos.org/files/15189/star.png"/> 
-1em:<img  src="https://mdn.mozillademos.org/files/15189/star.png"/>
20%:<img src="https://mdn.mozillademos.org/files/15189/star.png"/> 
-100%:<img  src="https://mdn.mozillademos.org/files/15189/star.png"/>
</p>

#* {
  box-sizing: border-box;
}

img {
  margin-right: 0.5em;
}

p {
  height: 3em;
  padding: 0 .5em;
  font-family: monospace;
  text-decoration: underline overline;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}
  • Для вертикального позиционирования содержимого ячейки таблицы:
<table>
  <tr>
    <td>baseline</td>
    <td>top</td>
    <td>middle</td>
    <td>bottom</td>
    <td>
      <p>Существует теория, которая утверждает, что если однажды кто-нибудь доподлинно выяснит, что такое и для чего нужна Вселенная, она тотчас же исчезнет, и вместо нее появится нечто еще более причудливое и необъяснимое.</p>
<p>Существует и другая теория, согласно которой это уже случилось.</p>
table {
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}

table, th, td {
  border: 1px solid black;
}

td {
  padding: 0.5em;
  font-family: monospace;
}

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

Синтаксис

Свойство vertical-align задается одним из ключевых значений, указанных ниже.

Значения для строчных элементов

Значения относительно родительского элемента

Данные значения позиционируют элемент по вертикали относительно родительского элемента:

baseline
Выравнивает базовую линию элемента с базовой линией родительского элемента. Базовая линия некоторых замещаемых элементов, таких как <textarea>, не описана в спецификации HTML, что означает, что их поведение при указании данного ключевого слова может отличаться в зависимости от браузера.
sub
Выравнивает базовую линию элемента с базовой линией подстрочного индекса своего родителя.
super
Выравнивает базовую линию элемента с базовой линией надстрочного индекса своего родителя.
text-top
Выравнивает верхний край элемента с верхним краем шрифта родительского элемента.
text-bottom
Выравнивает нижний край элемента с нижним краем шрифта родительского элемента.
middle
Выравнивает середину элемента с базовой линией своего родителя плюс половина от его высоты (x-height).
<length>
Поднимает базовую линию элемента на указанную величину над базовой линией родительского элемента. Допустимы отрицательные значения.
<percentage>
Поднимает базовую линию элемента на указанную в процентах величину (вычисляется относительно значения свойства line-height) над базовой линией родительского элемента. Допустимы отрицательные значения.
Значения относительно строки

Следующие значения позиционируют элемент по вертикали относительно всей строки:

top
Выравнивает верхний край элемента и его потомков с верхним краем всей строки.
bottom
Выравнивает нижний край элемента и его потомков с нижним краем всей строки.

Для элементов, у которых нет базовой линии, вместо нее используется нижняя граница внешнего отступа (margin).

Значения для ячеек таблицы

baselinesub, super, text-top, text-bottom, <length>, и <percentage>)
Выравнивает базовую линию ячейки с базовой линией всех остальных ячеек этой строки, которые выравнены относительно базовой линии.
top
Выравнивает верхнюю границу внутреннего отступа (padding) ячейки с верхним краем строки таблицы.
middle
Выравнивает внутреннее поле (padding box) ячейки по центру относительно строки таблицы.
bottom
Выравнивает нижнюю границу внутреннего отступа (padding) ячейки с нижним краем строки таблицы.

Допустимы отрицательные значения.

Формальный синтаксис

baseline | sub | super | text-top | text-bottom | middle | top | bottom | <percentage> | <length>

Пример

HTML

<div>Изображение <img src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" /> с выравниванием по умолчанию.</div>
<div>Изображение <img src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" /> с выравниванием по верхнему краю.</div>
<div>Изображение <img src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" /> с выравниванием по нижнему краю.</div>
<div>Изображение <img src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" /> с выравниванием по центру.</div>

CSS

img.top { vertical-align: text-top; }
img.bottom { vertical-align: text-bottom; }
img.middle { vertical-align: middle; }

Результат

Спецификации

Совместимость с браузерами

Update compatibility data on GitHub

Компьютеры Мобильные
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome для Android Firefox для Android Opera для Android Safari on iOS Samsung Internet
vertical-align Chrome
Полная поддержка

1
Edge
Полная поддержка

12
Firefox
Полная поддержка

1
IE
Полная поддержка

4
Opera
Полная поддержка

4
Safari
Полная поддержка

1
WebView Android
Полная поддержка

1
Chrome Android
Полная поддержка

18
Firefox Android
Полная поддержка

4
Opera Android
Полная поддержка

14
Safari iOS
Полная поддержка

1
Samsung Internet Android
Полная поддержка

1.0

Легенда


Полная поддержка
 
Полная поддержка

Смотрите также

Свойство 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.

vertical-align | CSS | WebReference

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

Краткая информация

Значение по умолчанию baseline
Наследуется Нет
Применяется К строчным элементам или ячейкам таблицы
Анимируется Да

Синтаксис

vertical-align: baseline|bottom|middle|sub|super|text-bottom|text-top|top| 
  <размер> | <проценты>

Обозначения

Описание Пример
<тип> Указывает тип значения. <размер>
A && B Значения должны выводиться в указанном порядке. <размер> && <цвет>
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
[ ] Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [,<время>]*
+ Повторять один или больше раз. <число>+
? Указанный тип, слово или группа не является обязательным. inset?
{A, B} Повторять не менее A, но не более B раз. <радиус>{1,4}
# Повторять один или больше раз через запятую. <время>#

Значения

В качестве значения также можно использовать проценты, пиксели или другие доступные единицы. Положительное число смещает элемент вверх относительно базовой линии, в то время как отрицательное число опускает его вниз. При использовании процентов, отсчёт ведётся от значения свойства line-height, при этом 0% аналогично значению baseline.

Для выравнивания по вертикали в ячейках таблицы применяются следующие значения.

baseline
Выравнивает базовую линию ячейки с базовой линией первой текстовой строки или другого вложенного элемента.
bottom
Выравнивает по нижнему краю ячейки.
middle
Выравнивает по середине ячейки.
top
Выравнивает содержимое ячейки по её верхнему краю.

Пример

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>vertical-align</title>
<style>
.tex { font-size: 2rem; }
.tex sub {
vertical-align: sub;
font-size: 1.8rem;
}
.tex sup {
vertical-align: 5px;
font-size: 1.6rem;
}
</style>
</head>
<body>
<div>
T<sub>E</sub>X и L<sup>A</sup>T<sub>E</sub>X
</div>
</body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства vertical-align

Объектная модель

Объект.style.verticalAlign

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — свойство полностью поддерживается браузером со всеми допустимыми значениями;
  •  — свойство браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.

Число указывает версию браузера, начиная с которой свойство поддерживается.

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 30.08.2017

Редакторы: Влад Мержевич

Свойство vertical-align | CSS справочник

CSS свойства

Определение и применение

CSS свойство vertical-align определяет вертикальное позиционирование встроенных строчных (inline) элементов или ячеек таблицы (table-cell).

Поддержка браузерами

CSS синтаксис:

vertical-align:"baseline | length | sub | super | top | text-top | middle | bottom | text-bottom | initial | inherit";

JavaScript синтаксис:

object.style.verticalAlign = "sub"

Значения свойства

Значение Описание
baseline Выравнивает базовую линию текущего элемента по базовой линии родителя. Это значение по умолчанию.
length Поднимает или опускает базовую линию элемента на указанную величину относительно базовой линии родителя. Величина смещения указывается в единицах измерения, применяемых в CSS. При использовании положительного значения смещение происходит вверх, при отрицательном — вниз. Допускаются отрицательные значения
% Поднимает или опускает базовую линию элемента на указанную величину. Величина смещения в процентах расчитывается в зависимости от высоты строки (свойство line-height). При использовании положительного значения смещение происходит вверх, при отрицательном — вниз. Допускаются отрицательные значения
sub Выравнивает элемент, как подстрочный (нижний индекс).
super Выравнивает элемент, как надстрочный (верхний индекс).
top Верх элемента выравнивается по верху самого высокого элемента в строке.
text-top Верх элемента выравнивается с верхом шрифта родительского элемента.
middle Элемент размещается в середине родительского элемента.
bottom Низ элемента выравнивается с самым низким элементом в строке.
text-bottom Низ элемента выравнивается с низом шрифта родительского элемента.
initial Устанавливает свойство в значение по умолчанию.
inherit Указывает, что значение наследуется от родительского элемента.

Обращаю Ваше внимание, что при работе с ячейками таблицы применяются только следующие значения*:

Значение Описание
baseline Выравнивает базовую линию ячейки по базовой линии родителя. Это значение по умолчанию.
top Выравнивает содержимое ячейки вертикально по верхнему краю.
middle Выравнивает содержимое ячейки вертикально по середине.
bottom Выравнивает содержимое ячейки вертикально по нижнему краю.

* — Значения sub, super, text-top, text-bottom, length и %, примененные к ячейке таблицы будут вести себя как при использовании значения baseline.

Версия CSS

CSS1

Наследуется

Нет.

Анимируемое

Да.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title>Вертикальное позиционирование.</title>
<style> 
div {
width : 30%; /* задаём ширину блока */
}
img {
width : 75px; /* задаём ширину изображения */
height : 75px; /* задаём высоту изображения */
}
p {
background-color : orange; /* задаём задний фон для элемента <p> */
}
.top {
vertical-align : text-top; /* верх элемента выравнивается с верхом шрифта родительского элемента */
}
.bottom {
vertical-align : text-bottom; /* низ элемента выравнивается с низом шрифта родительского элемента */
}
</style>
</head>
	<body>
		<p>Baseline<img src = "nich.jpg" alt = "nich"></p>
		<p>Text-Top<img src = "nich.jpg" alt = "nich" class = "top"></p>
		<p>Text-Bottom<img src = "nich.jpg" alt = "nich" class = "bottom"></p>
	</body>
</html>

Пример вертикального позиционирования.CSS свойства

vertical-align | CSS справочник

Поддержка браузерами



12.0+ 4.0+ 1.0+ 1.0+ 4.0+ 1.0+

Описание

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

Если свойство применяется к строчному элементу, то оно влияет на выравнивание самого строчного элемента, а не его содержимого.

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

Допускается использование отрицательных значений.







Значение по умолчанию: baseline (для строчных элементов), middle (для ячеек таблицы)
Применяется: к строчным элементам (inline, inline-block) и ячейкам таблицы (table-cell)
Анимируется: да
Наследуется: нет
Версия: CSS1
Синтаксис JavaScript: object.style.verticalAlign=»bottom»

Синтаксис

vertical-align: baseline|величина|sub|super|top|text-top|middle|bottom|text-bottom|inherit;

Значения свойства для строчных элементов












Значение Описание
baseline Базовая линия элемента выравнивается относительно базовой линии родительского элемента.
sub Выравнивает элемент по типу нижнего индекса.
super Выравнивает элемент по типу верхнего индекса.
text-top Выравнивает верхний край элемента относительно верхнего края шрифта родительского элемента.
text-bottom Выравнивает нижний край элемента относительно нижнего края шрифта родительского элемента.
middle Выравнивает середину элемента относительно базовой линии родительского элемента.
top Выравнивает верхний край элемента относительно верха самого высокого элемента в строке.
bottom Выравнивает нижний край элемента относительно нижнего края элемента, расположенного ниже всех в строке.
величина Смещает базовую линию текущего элемента на указанную величину вверх/вниз относительно базовой линии родителя. Величина смещения указывается в единицах измерения, используемых в CSS. Величина указанная в процентах вычисляются относительно высоты строки (line-height) установленной для элемента. При использовании положительного значения, элемент смещается вверх, при использовании отрицательного – вниз.
% Смещает базовую линию элемента на указанную величину вверх/вниз относительно базовой линии его родительского элемента. Величина смещения указанная в процентах вычисляется в зависимости от высоты строки. При использовании положительного значения, элемент смещается вверх, при использовании отрицательного — вниз.

Значения свойства для ячеек таблицы






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

Пример

Демонстрация свойства vertical-aligns.


span#mySpan {
background-color: yellow;
vertical-align: baseline;
}

Разбираемся с 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 свойство вертикального выравнивания

Пример

Выровнять изображение по вертикали:

img.a {
vertical-align: baseline;
}

img.b {
vertical-align: text-top;
}

рис. C {

вертикальное выравнивание: нижний текст;
}

рис.d {
вертикальное выравнивание: суб;
}

img.e {
vertical-align: super;
}

Попробуй сам »


Определение и использование

Свойство vertical-align устанавливает вертикальное выравнивание элемента.


Поддержка браузера

Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.

Объект
с выравниванием по вертикали 1,0 4,0 1,0 1,0 4,0


Синтаксис CSS

вертикальное выравнивание: базовая линия | length | sub | super | top | text-top | middle | bottom | text-bottom | initial | наследовать;

Стоимость недвижимости

Значение Описание Играй
базовый Элемент выровнен по базовой линии родительского элемента.Это по умолчанию Играй »
длина Поднимает или опускает элемент на указанную длину. Допускаются отрицательные значения. Подробнее о единицах длины Играй »
% Поднимает или опускает элемент в процентах от «line-height».
свойство. Допускаются отрицательные значения
Играй »
переходник Элемент выровнен по базовой линии нижнего индекса родительского Играй »
супер Элемент выровнен по базовому верхнему индексу родительского элемента Играй »
верх Элемент выровнен по верхнему краю
самый высокий элемент на линии
Играй »
текст вверху Элемент выровнен по верхнему краю
шрифт родительского элемента
Играй »
средний Элемент помещается в середину родительского элемента Играй »
нижняя Элемент выровнен по
нижний элемент в строке
Играй »
текст снизу Элемент выровнен по
нижняя часть шрифта родительского элемента
Играй »
начальный Устанавливает для этого свойства значение по умолчанию.Читать про начальные Играй »
наследовать Наследует это свойство от своего родительского элемента. Читать про наследство

Связанные страницы

Учебник

CSS: Текст CSS

Ссылка на HHTML DOM: свойство verticalAlign

.

CSS с вертикальным выравниванием,. html (valign)

→ HTML → CSS → CSS с вертикальным выравниванием

CSS vertical-align,. ,, встроенный встроенный блок. .


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

 
... вертикальное выравнивание: значение; ...

значение:

  • базовый уровень — ()
  • снизу — (,)
  • средний —
  • суб — ()
  • супер — ()
  • нижний текст —
  • верхний текст —
  • верх —
  • наследства —
  • -..
  • -. .

вертикальное выравнивание:


вертикальное выравнивание. <таблица> валин.



CSS valign

 

значение:

  • базовый —
  • низ —
  • средний —
  • верх —

:

 
<таблица>

:


1.вертикальное выравнивание: базовая линия, низ, верх, суб

 
<стиль> .vert_align_baseline { дисплей: встроенный блок; вертикальное выравнивание: базовая линия; фон: #ccc; } .vert_align_top { дисплей: встроенный блок; вертикальное выравнивание: сверху; фон: #ccc; } .vert_align_bottom { дисплей: встроенный блок; вертикальное выравнивание: снизу; фон: #ccc; } .vert_align_sub { дисплей: встроенный блок; вертикальное выравнивание: суб; фон: #ccc; } .vert_align_text_top { дисплей: встроенный блок; вертикальное выравнивание: сверху; фон: #ccc; }
vert_align_baseline
vert_align_bottom
vert_align_top
vert_align_sub


2.вертикальное выравнивание:

.

 
<стиль> .vert_align_abs_plus { дисплей: встроенный блок; вертикальное выравнивание: 10 пикселей; фон: #aaa; } .vert_align_abs_minus { дисплей: встроенный блок; вертикальное выравнивание: -5 пикселей; фон: #aaa; } .vert_align_per_plus { дисплей: встроенный блок; вертикальное выравнивание: 50%; фон: #aaa; } .vert_align_per_minus { дисплей: встроенный блок; вертикальное выравнивание: -30%; фон: #aaa; }
10
5
50%
30%

:

.10

. 5

. 50%

. 30%


вертикальное выравнивание: по центру (). средний «Х» (x-).


с вертикальным выравниванием JavaScript:

 
object.style.verticalAlign = "VALUE"


:

• Граница CSS

• Фон CSS

• Переход CSS

• дисплей

• nth-child

• перелив

• текст-отступ

← CSS

.

выравнивание по вертикали | CSS-уловки

Свойство vertical-align в CSS управляет выравниванием элементов, расположенных рядом друг с другом в строке.

  img {
  вертикальное выравнивание: средний;
}  

Для того, чтобы это работало, элементы должны быть установлены по базовой линии. Например, inline- (например, , ) или inline-block (например, как установлено свойством display ).

Допустимые значения:

  • baseline — это значение по умолчанию.
  • top — Совместите верх элемента и его потомков с верхом всей строки.
  • bottom — Выровняйте нижнюю часть элемента и его потомков с нижней частью всей строки.
  • средний — выравнивает середину элемента по середине строчных букв в родительском элементе.
  • text-top — выравнивает верх элемента по верхнему краю шрифта родительского элемента.
  • text-bottom — выравнивает нижний край элемента по нижнему краю шрифта родительского элемента.
  • sub — выравнивает базовую линию элемента с нижней линией его родительского элемента. Например, где будет сидеть .
  • super — выравнивает базовую линию элемента с верхним индексом его родительского элемента. Например, где будет сидеть .
  • length — выравнивает базовую линию элемента на заданной длине над базовой линией его родительского элемента. (например, px,%, em, rem и т. д.)

Вы можете увидеть примеры каждого здесь:

  Оцените эту ручку! 

Распространенный вариант использования — объединение аватара с именем пользователя.Чтобы выровнять их по центру линии, используйте vertical-align: middle; . Однако обратите внимание, что он центрирует текст в соответствии с его самым высоким восходящим и самым глубоким нижним нижними элементами.

Каждый элемент выстраивается в соответствии с установленной вами линией, которая не меняется от элемента к элементу. Таким образом, вы можете смешивать и сопоставлять, какие элементы имеют какое значение — элементы не влияют на eac

.

html — CSS вертикальное выравнивание — qaru

Переполнение стека

  1. Около
  2. Продукты

  3. Для команд
  1. Переполнение стека
    Общественные вопросы и ответы

  2. Переполнение стека для команд
    Где разработчики и технологи делятся частными знаниями с коллегами

  3. Вакансии
    Программирование и связанные с ним технические возможности карьерного роста

  4. Талант
    Нанимайте технических специалистов и создавайте свой бренд работодателя

  5. Реклама
    Обратитесь к разработчикам и технологам со всего мира

  6. О компании

.