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-align:
baseline
sub
super
top
text-top
middle
bottom
text-bottom
0px
10px
25px
-25px
-50px
1cm
10%
50%
Демонстрация свойства vertical-aligns.
span#mySpan {
background-color: yellow;
vertical-align: baseline;
}
vertical-align — Справочник CSS
schoolsw3.com
САМОСТОЯТЕЛЬНОЕ ОБУЧЕНИЕ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ
❮ Назад CSS Справочник Далее ❯
Пример
Вертикальное выравнивание изображения:
img.
a {
vertical-align: baseline;
}
img.b {
vertical-align: text-top;
}
img.c {
vertical-align: text-bottom;
}
img.d {
vertical-align: sub;
img.e {
vertical-align: super;
}
Попробуйте сами »
Определение и использование
Свойство vertical-align задает вертикальное выравнивание элемента.
| Значение по умолчанию: | baseline |
|---|---|
| Унаследованный: | нет |
| Анимируемый: | да. Прочитать о animatable Попробовать |
| Версия: | CSS1 |
| JavaScript синтаксис: | object.style.verticalAlign=»top» Попробовать |
Поддержка браузеров
Числа в таблице указывают первая версия браузер, который полностью поддерживает свойство.
| Свойство | |||||
|---|---|---|---|---|---|
| vertical-align | 1. 0 | 4.0 | 1.0 | 1.0 | 4.0 |
CSS Синтаксис
vertical-align: baseline|length|sub|super|top|text-top|middle|bottom|text-bottom|initial|inherit;
Значения свойств
| Значение | Описание | Воспроизвести |
|---|---|---|
| baseline | Элемент выравнивается по базовой линии родителя. Это показатель | Воспроизвести » |
| length | Повышает или понижает элемента до указанной длины. Допускаются отрицательные значения.Прочитать о Eдиницы длины | Воспроизвести » |
| % | Повышает или понижает элемента в процентах из свойства line-height. Допускаются отрицательные значения | Воспроизвести » |
| sub | Элемент выровнен с subscript базовой линии родителя | Воспроизвести » |
| super | Элемент выровнен с superscript базовой линии родителя | Воспроизвести » |
| top | Элемент выровнен с верхней части самого высокого элемента в строке | Воспроизвести » |
| text-top | Элемент выровнен с верхней части шрифта родительского элемента. | Воспроизвести » |
| middle | Элемент находится в центре родительского элемента | Воспроизвести » |
| bottom | Элемент совпадает с минимальным элементом в строке | Воспроизвести » |
| text-bottom | Элемент совмещен с нижней частью шрифта родительского элемента. | Воспроизвести » |
| initial | Устанавливает это свойство в значение индекса. Прочитать о initial | Воспроизвести » |
| inherit | Наследует это свойство от родительского элемента. Прочитать о inherit |
Связанные страницы
CSS Учебник: CSS Текст
HTML DOM Справочник: Свойство verticalAlign
❮ Назад CSS Справочник Далее ❯
ВЫБОР ЦВЕТА
ТОП Учебники
HTML УчебникJavaScript Учебник
КАК Учебник
SQL Учебник
Python Учебник
W3.
CSS УчебникBootstrap Учебник
PHP Учебник
Java Учебник
C++ Учебник
jQuery Учебник
ТОП Справочники
HTML СправочникCSS Справочник
JavaScript Справочник
SQL Справочник
Python Справочник
W3.CSS Справочник
Bootstrap Справочник
PHP Справочник
HTML Цвета
Java Справочник
Angular Справочник
jQuery Справочник
ТОП Примеры
HTML ПримерыCSS Примеры
JavaScript Примеры
КАК Примеры
SQL Примеры
Python Примеры
W3.CSS Примеры
Bootstrap Примеры
PHP Примеры
Java Примеры
XML Примеры
jQuery Примеры
Форум | О SchoolsW3
SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания.
Авторское право 1999- Все права защищены.
SchoolsW3 работает на площадке от SW3.CSS.
CSS | vertical-align Property — GeeksforGeeks
90 0008 |
Img1 {
Img6 {
img11 { 
Портал компьютерных наук 
Как выровнять текст по вертикали с помощью CSS
У вас есть большой HTML Div с текстом внутри.
У вас нет проблем с центрированием текста по горизонтали с помощью CSS, но по вертикали? Хм. Это немного сложнее, и вы в тупике.
Или, может быть, вам нужен совершенно другой тип вертикального выравнивания текста CSS. Возможно, у вас есть строка текста с двумя разными размерами шрифта, и вы хотите, чтобы меньший шрифт был выровнен по вертикали по середине большего размера шрифта — например, цитата или цитата или что-то в этом роде.
Это совершенно разные сценарии с разными решениями, но оба они заставляют вас кричать об одном и том же: Вертикальное выравнивание текста в CSS, как мне это сделать???
Это может быть неприятно, но у нас есть варианты — давайте посмотрим.
Определение наших сценариев
Я знаю, что мы уже определили сценарии во введении к этому посту, но давайте удостоверимся, что мы абсолютно ясно понимаем, чего мы пытаемся достичь здесь.
Сценарий 1
У нас есть HTML-элемент div, в котором мы хотим, чтобы текст внутри элемента был вертикально выровнен по центру.
Вот так:
Сценарий 2
У нас есть код строки с двумя разными размерами шрифта. Мы хотим, чтобы меньший размер шрифта был вертикально выровнен по середине большего размера шрифта. Вот так:
Начнем с первого сценария.
CSS Вертикальное выравнивание текста с помощью CSS Flexbox
Итак, мы хотим вертикально выровнять текст в div или другом контейнере.
Один из способов сделать это — использовать CSS Flexbox. Если вы не знакомы с Flexbox, это модуль макета CSS, который упрощает создание более гибкого и отзывчивого макета.
Flexbox позволяет немного больше контролировать макет и упрощает вертикальное выравнивание текста с помощью селектора align-items.
Давайте посмотрим на код:
См. перо
Сценарий вертикального выравнивания текста CSS 1 — Flex от Криса Бартона (@TheWebDeveloperGuide)
на КодПене.
Здесь я использую 3 селектора CSS Flexbox:
- Я объявляю его элементом Flexbox, используя display: flex; Это означает, что я делаю возможным управление любым элементом внутри этого div (дочерние элементы) с помощью CSS Flexbox.
- Я использую justify-content: center для центрирования текста по горизонтали.
- Я использую align-items: center , чтобы выровнять текст по вертикали.
Могу ли я использовать Flexbox Align-Items?
Прежде чем принять это как окончательное решение, вам, вероятно, следует сначала выяснить, можете ли вы на самом деле использовать CSS Flex и селектор align-items.
Почему я не могу его использовать? Возможно, вы спрашиваете себя. Ответ прост: поддержка браузера. CSS Flex не так хорошо работает в старых браузерах, особенно в IE (сюрприз, сюрприз).
На самом деле, даже IE11 указан как имеющий лишь частичную поддержку (IE Edge поддерживает его полностью).
Так что, если вам по какой-то причине нужна поддержка старых браузеров, просто имейте это в виду. Вы можете узнать больше о поддержке браузером селектора CSS align-items на CanIUse.com.
Выравнивание текста по вертикали CSS с помощью CSS Grid
Вертикальное выравнивание текста CSS можно выполнить с помощью нового модуля компоновки CSS, известного как Grid. CSS Grid — это небольшое обновление CSS Flexbox, действительно полезное для создания отличных макетов.
Вот Codepen, показывающий, как мы вертикально выровняли наш текст с помощью CSS Grid:
См. перо CSS Вертикальное выравнивание текста. Сценарий 1 — Сетка от Криса Бартона (@TheWebDeveloperGuide) на КодПене.
Для такого простого примера, как этот, может показаться, что нет никакой разницы между модулями макета CSS Flexbox и CSS Grid, но как только ваш макет станет немного сложнее, мощь стиля макета Grid будет становиться все более и более очевидной.
Могу ли я использовать CSS Grid Align-Items?
Еще раз предостережение перед внедрением этого решения: убедитесь, что вы можете использовать его в любых поддерживаемых вами веб-браузерах.
Несмотря на то, что CSS Grid является более новой технологией, чем CSS Flexbox, поддержка там почти такая же. В IE10 и IE11 есть незначительная поддержка (ограниченная функциональность и то, что вы можете делать, должно быть ограничено специфическими селекторами CSS IE), но любой другой современный браузер в основном подходит.
Опять же, вы можете самостоятельно проверить поддержку CSS Grid в браузерах на CanIUse.com.
CSS Вертикальное выравнивание текста с абсолютным позиционированием CSS
При всех замечательных функциях компоновки, встроенных в CSS, использование абсолютного позиционирования в CSS для достижения нашей цели вертикального выравнивания текста, на мой взгляд, немного излишне.
НО для полноты стоит упомянуть этот способ выравнивания текста по вертикали на тот случай, если это единственный доступный вам вариант (по какой-либо причине).
Взгляните на нашу ручку:
См. перо CSS Вертикальное выравнивание текста. Сценарий 1. Абсолютное позиционирование. Крис Бартон (@TheWebDeveloperGuide) на КодПене.
Как вы могли заметить, здесь есть еще кое-что.
Во-первых, если вы раньше использовали абсолютное позиционирование в CSS, то вы знаете, что если я хочу, чтобы мой элемент располагался абсолютно внутри содержащего его div, то позиционирование этого div должно быть явно установлено как относительное. В противном случае div с абсолютным позиционированием не будет содержаться в контейнере — только сама веб-страница.
Во-вторых, вас может интересовать использование функции CSS Calc. Для тех из вас, кто раньше не использовал функцию Calc, вы упускаете действительно мощную функцию CSS.
Я не буду вдаваться в подробности об этой функции здесь, но прочитайте больше об этом на W3Schools для получения дополнительной информации — это будет НАСТОЛЬКО стоит вашего времени. По сути, здесь я вычисляю истинную середину контейнера div на основе высоты внутреннего div.
Позвольте мне объяснить: когда вы используете верхние 50%, веб-браузер будет вычислять 50% от верхней части контейнера div (в данном случае .box) до сверху нашего внутреннего блока (.box__content). Это означает, что содержимое внутреннего div будет находиться ниже середины содержащего div и просто выглядеть как .
Есть несколько способов борьбы с этим, но назначение внутреннего блока div заданной высоты и использование функции CSS Calc для определения абсолютного центра — лучший вариант для меня.
Вы можете просто настроить верхнее значение, пока оно не будет выглядеть правильно, но тогда вы получите значение 47% или какое-то другое случайное число (или магическое число, если хотите), которое не так удобно для веб-разработчиков мне нравится.
Давайте посмотрим, как мы можем выровнять наш текст по вертикали для второго сценария.
Выравнивание текста по вертикали CSS с помощью CSS-селектора вертикального выравнивания
Давайте начнем с определения реального примера того, почему может потребоваться вертикальное выравнивание шрифта разного размера в одной строке.
Мы хотим создать стандартный стиль цитаты, в котором фактический текст цитаты больше, чем цитата.
В этой ситуации вы должны использовать тег выбора вертикального выравнивания и установить его значение равным средний .
Как следует из названия селектора CSS, свойство vertical-align задает вертикальное выравнивание встроенного или табличного свойства. У него есть несколько интересных опций:
- Базовый
- Топ
- Средний
- Низ
- Sub
- Текстовая верхняя часть
- Длина (в которой можно указать значение вертикального выравнивания)
- Процент (в котором можно указать процент вертикального выравнивания)
Для задачи, которую мы здесь пытаемся выполнить, мы собираемся использовать вариант посередине .
Смотрите нашу демонстрацию Codepen ниже:
См. перо Сценарий вертикального выравнивания текста CSS 2, Крис Бартон (@TheWebDeveloperGuide) на КодПене.
Этот способ вертикального выравнивания в CSS на самом деле очень полезен, особенно если у вас есть комбинация текста и изображений, которые вы хотите выровнять точно на одной строке.
Заключение
Вертикальное выравнивание CSS Текст может означать две разные вещи.
- Вы хотите выровнять текст внутри контейнера по вертикали.
- Вы хотите, чтобы текст большего и меньшего размера или текст и изображения были выровнены по вертикали.
Для первого сценария есть 3 разных способа сделать это:
- Использование CSS Flexbox.
- Использование сетки CSS.
- Использование абсолютной позиции CSS.
