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).
Значения для ячеек таблицы
baseline(иsub,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 управляет вертикальным выравниванием элементов внутри своих родителей. Оно применяется к строчным элементам и к ячейкам таблиц. У него десять возможных значений:
baselinesubsupertext-toptext-bottommiddletopbottom- указание расстояния
- указание процентов
Типографские единицы измерения
Разные значения свойства 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 может быть разбито на три простых для понимания правила:
- Оно применяется только к строчным элементам
inlineили строчным блокамinline-block. - Оно влияет на выравнивание самого элемента, а не его содержимого (кроме случаев, когда применяется к ячейкам таблицы).
- Когда оно применяется к ячейке таблицы, выравнивание влияет на содержимое ячейки, а не на неё саму.
Иными словами, следующий код не даст никакого эффекта:
div {
vertical-align: middle; /* эта строка бесполезна */
}
Почему? Потому что <div> — это не строчный элемент и даже не строчный блок. Конечно, если вы сделаете его строчным или строчным блоком, то применение vertical-align даст желаемый эффект.
С другой стороны, при правильном применении (к строчному элементу или строчному блоку), свойство vertical-align заставит текущий элемент выровняться относительно других строчных элементов.
Выше или ниже расположится элемент, будет зависеть от высоты строчных элементов на этой же строке или от свойства line-height, заданного для неё.
Несколько картинок#
Вот картинка с пояснительным текстом, которая поможет вам понять, что происходит при вертикальном выравнивании строчных элементов:
А вот пример, в котором есть несколько строчных элементов, один из которых прижат к верху.
Ключевые слова#
Несколько ключевых слов, которые можно задавать в качестве значений для свойства vertical-align:
baseline, значение по умолчанию или «изначальное»bottommiddlesubsupertext-bottomtext-toptop
Возможно, многие из них вы не будете использовать, но было бы неплохо знать все имеющиеся варианты. Например, на демо-странице, из-за того что значение 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_sub2.вертикальное выравнивание:
.
<стиль> .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
Переполнение стека
- Около
Продукты
- Для команд
Переполнение стека
Общественные вопросы и ответыПереполнение стека для команд
Где разработчики и технологи делятся частными знаниями с коллегамиВакансии
Программирование и связанные с ним технические возможности карьерного ростаТалант
Нанимайте технических специалистов и создавайте свой бренд работодателяРеклама
Обратитесь к разработчикам и технологам со всего мира- О компании
.
2024 © Все права защищены.
Добавить комментарий