Html выравнивание текста по вертикали: Как выровнять текст или блок div по вертикали

Posted on by alexxlab

Содержание

Как в css выровнять текст по центру: множество простых способов

 

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

Однако в данной публикации я расскажу вам о всевозможных способах выравнивания объектов, а также объясню, как делать отступы и красные строки в абзацах. Так что давайте приступать к изучению материала!

Html и его детища <center> и align

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

Что касается валидации (данный термин подробно описан в статье «Как проверить html код на ошибки»), то в самой спецификации html осуждается использование <center>, так как для валидности необходимо использовать переходной <!DOCTYPE>.

Такой тип <!DOCTYPE> пропускает запрещенные элементы.

1
2
3
4
5
6
7
8
9
10
11
12

<!DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>CENTER</title>
  <meta charset=utf-8">
 </head>
 <body> 
 <center>
  <p>Этот контент будет расположен по центру.</p>
  </center>  
 </body> 
</html>

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»> <html> <head> <title>CENTER</title> <meta charset=utf-8″> </head> <body> <center> <p>Этот контент будет расположен по центру.</p> </center> </body> </html>

Теперь перейдем к атрибуту

align. Он задает горизонтальное выравнивание объектов на страницах сайтов и вписывается после объявления тега. Обычно с его помощью контент можно выровнять по левому краю (left), по правому краю (right), по центру (center) и по ширине текста (justify).

Ниже я приведу пример, в котором картинку и абзац расположу по центру.

1
2
3
4
5
6
7
8
9
10

<!DOCTYPE HTML>
<html>
 <head>
  <title>align</title>
  <meta charset=utf-8">
 </head>
 <body> 
  <p align ="center"><img src="http://zverivdom.com/files/node_post/photo/prodajutsya-shhenki-sibirskij-khaski--speshite-ostalosy-dva-shhenka.jpg" alt="Щенок" align="middle"> Этот контент будет расположен по центру.</p>
 </body> 
</html>

<!DOCTYPE HTML> <html> <head> <title>align</title> <meta charset=utf-8″> </head> <body> <p align =»center»><img src=»http://zverivdom. com/files/node_post/photo/prodajutsya-shhenki-sibirskij-khaski—speshite-ostalosy-dva-shhenka.jpg» alt=»Щенок» align=»middle»> Этот контент будет расположен по центру.</p> </body> </html>

Заметьте, что для картинки разбираемый нами атрибут имеет несколько другие значения.

В примере я использовал align=»middle». Благодаря этому изображение выровнялось так, что предложение расположилось четко посредине картинки.

Инструменты центрирования в css

Css-свойствами, предназначенными для выравнивания блоков, текстового и графического контента, пользуются намного чаще. Это связанно в первую очередь с удобством и гибкостью реализации стилей.

 

Итак, начнем с первого свойства центрирования текста — это text- align.

Оно функционирует так же, как и align в html разметке. Среди ключевых слов можно выбрать одно из общего списка или унаследовать характеристики предка (inherit).

Хочу отметить, что в css3 можно установить еще 2 параметра: start – в зависимости от правил написания текста (справа налево или наоборот) устанавливает выравнивание слева или справа (аналогично работе left или right) и

end – противоположен start (при написании текста слева направо действует как right, при написании справа налево – left).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>text-align</title>
  <style>
   div {
    border: 5px double red;
    padding: 0 22px 0 22px;
   }
#l {
   text-align: right; }
#s {
   text-align: end; }
  </style>
 </head>
 <body>
  <div><p>Предложение справа</p>
      <p>Предложение c использованием end</p>
</div>
 </body>
</html>

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>text-align</title> <style> div { border: 5px double red; padding: 0 22px 0 22px; } #l { text-align: right; } #s { text-align: end; } </style> </head> <body> <div><p>Предложение справа</p> <p>Предложение c использованием end</p> </div> </body> </html>

Расскажу о небольшой фишке. При выборе значения justify последняя строка может некрасиво болтаться снизу. Для того чтобы ее, например, расположить по центру, можно воспользоваться свойством text-align-last.

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

Ключевое слово Предназначение
baseline Указывает выравнивание по линии предка, которая называется базовой. Если такой линии у объекта-предка не имеется, то выравнивание происходит по нижнему border-у.
middle Середина видоизменяемого объекта выравнивается по базовой линии, к которой добавляется пол высоты элемента-родителя.
bottom Нижняя часть выбранного контента подстраивается под основание объекта, находящегося ниже всех.
top Аналогично bottom, только с верхней частью объекта.
super Делает символ надстрочным.
sub Делает элемент подстрочным. 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>vertical-align</title>
<style>
div{
  font-size: 4em;
  text-align:center;
  text-decoration: underline;
}
#A{vertical-align: top;}
#B{vertical-align: middle;}
#C{vertical-align: super;}
#D{vertical-align: sub;}
</style>
 </head>
 <body>  
  <div>
Ц<span>В</span>Е<span>Т</span><span>О</span><span>К</span>
  </div>
 </body>
</html>

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>vertical-align</title> <style> div{ font-size: 4em; text-align:center; text-decoration: underline; } #A{vertical-align: top;} #B{vertical-align: middle;} #C{vertical-align: super;} #D{vertical-align: sub;} </style> </head> <body> <div> Ц<span>В</span>Е<span>Т</span><span>О</span><span>К</span> </div> </body> </html>

Отступы

И наконец мы дошли с вами до отступов в абзаце. В языке css используется специальное свойство под названием text-indent.

С его помощью можно сделать как красную строку, так и выступ (нужно указать отрицательное значение).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>text-indent</title>
  <style>
   #a { text-indent: 53px;    }
#b { text-indent: -43px;    }
div {
background: #FFDAB9;
width:35%;
font-size:29px;
margin-left: 30%;
padding-left:50px;
}
  </style> 
 </head> 
 <body>
<div>
   <p>Для создания красной строки нужно знать всего лишь один параметр.</p>
   <p>Им является простое свойство text-indent.</p>
</div>
 </body>
</html>

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>text-indent</title> <style> #a { text-indent: 53px; } #b { text-indent: -43px; } div { background: #FFDAB9; width:35%; font-size:29px; margin-left: 30%; padding-left:50px; } </style> </head> <body> <div> <p>Для создания красной строки нужно знать всего лишь один параметр.

</p> <p>Им является простое свойство text-indent.</p> </div> </body> </html>

Хвалю тех, кто опробовал каждый пример на практике. Отправляйте ссылки на мой блог друзьям и не забывайте подписываться. Удачи! Пока-пока!

С уважением, Роман Чуешов

 

 

Загрузка…

Прочитано: 968 раз

CSS text-align (выравнивание текста по горизонтали в CSS) — urvanov.ru

<!DOCTYPE html>

<html>

<head>

    <title>CSS text-align</title>

    <meta http-equiv=»Content-Type» content=»text/html;charset=utf8″>

</head>

<body>

<p>

Выравнивание по левому краю (left). Здесь текст будет выравниваться по левому краю. Чтобы увидеть этот эффект текста должно быть много и он должен не помещаться на одну строку. Вот так вот, товарищи. Давайте строем ходить в боа. Ещё текст. Море текста, горы текста. Огромное количество текста.

</p>

<p>

Выравнивание по центру (center). Здесь текст будет выравниваться по центру. Чтобы увидеть этот эффект текста должно быть много и он должен не помещаться на одну строку. Вот так вот, товарищи. Давайте строем ходить в боа. Ещё текст. Море текста, горы текста. Огромное количество текста.

</p>

<p>

Выравнивание по правому краю (right). Здесь текст будет выравниваться по ширине. Чтобы увидеть этот эффект текста должно быть много и он должен не помещаться на одну строку. Вот так вот, товарищи. Давайте строем ходить в боа. Ещё текст. Море текста, горы текста. Огромное количество текста.

</p>

<p>

Выравнивание по ширине (justify). Здесь текст будет выравниваться по правому краю. Чтобы увидеть этот эффект текста должно быть много и он должен не помещаться на одну строку. Вот так вот, товарищи. Давайте строем ходить в боа. Ещё текст. Море текста, горы текста. Огромное количество текста.

</p>

<p>

Выравнивание по началу текста (start). Здесь текст будет выравниваться по началу. Разница будет заметна при использовании языков с начертанием справа налево. Чтобы увидеть этот эффект текста должно быть много и он должен не помещаться на одну строку. Вот так вот, товарищи. Давайте строем ходить в боа. Ещё текст. Море текста, горы текста. Огромное количество текста.

</p>

<p>

Выравнивание по концу текста (end). Здесь текст будет выравниваться по концу. Разница будет заметна при использовании языков с начертанием справа налево.  Чтобы увидеть этот эффект текста должно быть много и он должен не помещаться на одну строку. Вот так вот, товарищи. Давайте строем ходить в боа. Ещё текст. Море текста, горы текста. Огромное количество текста.

</p>

 

<p>

<a href=»https://urvanov.ru/2016/02/15/css-text-align/»>CSS text-align (выравнивание текста по ширине в CSS)</a>

</p>

</body>

</html>

Css положение блока по центру. Как в HTML сделать выравнивание текста по центру, ширине, краям страницы

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

1. Горизонтальное выравнивание по центру блока/страницы

1.1. Если для блока задана ширина:
div { width: 300px; margin: 0 auto; /*центрируем элемент по горизонтали в пределах родительского блока*/ }

Если нужно выровнять строчный элемент таким способом, ему нужно задать display: block;

1.2. Если блок вложен в другой блок и для него не задана/задана ширина:
.wrapper {text-align: center;}
1.3. Если для блока задана ширина и его нужно зафиксировать по центру родительского блока:
.wrapper {position: relative; /*задаем для родительского блока относительное позиционирование, чтобы потом абсолютно позиционировать блок внутри него*/} .box { width: 400px; position: absolute; left: 50%; margin-left: -200px; /*смещаем блок влево на расстояние, равное половине его ширины*/ }
1.4. Если для блоков не задана ширина, можно центрировать с помощью родительского блока-обертки:
. wrapper {text-align: center; /*располагаем содержимое блока по центру*/} .box { display: inline-block; /*располагаем блоки в ряд по горизонтали*/ margin-right: -0.25em; /*убираем правый отступ между блоками*/ }

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

2.1. Если текст занимает одну строчку, например, для кнопок и пунктов меню:
.button { height: 50px; line-height: 50px; }
2.2. Для выравнивания блока по вертикали внутри родительского блока:
.wrapper {position: relative;} .box { height: 100px; position: absolute; top: 50%; margin: -50px 0 0 0; }
2.3. Вертикальное выравнивание по типу таблицы:
.wrapper { display: table; width: 100%; } .box { display: table-cell; height: 100px; text-align: center; vertical-align: middle; }
2.4. Если для блока задана ширина и высота, и его нужно выровнять по ц

Урок 5. Выравнивание текста в CSS

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

Выравнивание текста в CSS


У свойства text-align имеется 4 стандартных значения:

right — выравнивание по правому краю.

center — выравнивание по левому краю.

left — выравнивание по левому краю.

justify — выравнивание по ширине. Для этого браузер создает пробелы между символами, что бы достичь этого результата.

Код CSS

.text_center {

  text-align: center; /* выравнивание по центру */

}

.text_left {

  text-align: left; /* выравнивание по левому краю */

}

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


Теперь перейдём к примеру, где рассмотрим действие выравнивания текста.

Код HTML и CSS

<html>

<head>

   <title>Пример выравнивания текста в CSS</title>
<style>

. text_center {

  text-align: center; /* выравнивание по центру */

}

.text_left {

  text-align: left; /* выравнивание по левому краю */

}

.text_right {

  text-align: right; /* выравнивание по правому краю */

}

.text_justify {

  text-align: justify; /* выравнивание по ширине */

}

</style>
</head>

<body>
<p class="text_center">Текст по центру</p>

<p class="text_left">Текст по левому краю</p>

<p class="text_right">Текст по правому краю</p>

<p class="text_justify">Текст по ширине</p>
</body>

</html>

Демонстрация Скачать исходники
В результате независимо от масштабирования окна текст будет выравниваться согласно значению свойства text-align.

Спасибо за внимание!

Html выровнять текст по вертикали

Выравнивание элементов на веб-странице может оказаться не такой легкой задачей, особенно если речь идет об выравнивание текста по вертикали. Этот вопрос часто встречается на форумах, и особую трудность решение этого вопроса вызывает у начинающих пользователей. Но на самом деле здесь сложного ничего нет. Все что нужно, это немного владеть знаниями каскадной таблицы стилей CSS. Так как это все делается за счет ее правил.

Выравнивание текста по вертикали можно добиться по меньшей мере пятью разными способами. Каждый из них по-своему хорош, учитывая обстоятельства и детали ситуации. Мы рассмотрим несколько примеров, а вы исходя из условий, подберете себе подходящее ращение.

Первый метод с line-height

Первый способ очень банальный и с большим недостатком, что ограничивает его в применении. Но все же, как ни крути, он может пригодиться и даже принести нужный результат. Это будет условным выравниванием, так как, по сути, мы задаем высоту строки в соответствии с высотой блока, использовав свойство line-height .

первый пример. демо №1

Точно таким же способом возможно реализовать картинку по центру вертикали, но добавив одно новое свойство vertical-align: middle; .

Выравнивание со свойством position

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

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

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

Выравнивание со свойством table

Здесь используем старую технику, превратив элементы в таблицу с ячейками. При этом теги таблицы

применять не будет, а воспользуемся свойствами CSS, такими как display: table; , display: table-cell; . В старых версиях IE данный способ не работает, да и не нужно. Ими, вообще, еще кто-то пользуется?

Выравнивание со свойством flex

Это идет уже более специфичный вариант со свойствами, которые не так часто встречаются в верстке сайта. Но, тем не менее они в редких случаях очень полезны.

Выравнивание со свойством transform

И последний в нашем списке, но далеко не последний в использовании способ. Сдвигаем по вертикали элемент на желаемое значение, в данном случае на -50%.

Приветствую вас на сайте Impuls-Web!

Делая верстку страницы, вы неизбежно столкнетесь с необходимостью сделать выравнивание текста по вертикали css, и у начинающих веб-разработчиков это может вызвать некоторые сложности.

В сегодняшней статье я хотела бы рассмотреть наиболее эффективные способы выравнивания текста по вертикали в CSS, которые вы смогли бы запомнить или добавить к себе куда-нибудь в шпаргалку и использовать в зависимости от ситуации.

Навигация по статье:

Свойство для вертикального выравнивания vertical-align

Базовым свойством, которое позволяет сделать в CSS выравнивание по вертикали является vertical-align.

В основном для выравнивания текста по вертикали css вам понадобятся значения top, middle, bottom. Они подходят для большинства случаев.

Так, в случае если нам нужно выровнять текст в каком-то блоке, то для начала оборачиваем его в тег

и задаем для него стиль vertical-align:middle;

Но на практике все оказывается немного сложней. Дело в том что данное свойство срабатывает только для табличных элементов и для того чтобы оно заработало нужно будет пойти на одну хитрость.

Для родительского элемента, то есть блока, в котором находится текст, мы задаем свойство display:table, а для абзаца с тексом – display:table-cell. В этом случае блок преобразуется в таблицу, а абзац в ячейку таблицы.

Internet Explorer Chrome Opera Safari Firefox Android iOS
6.0+ 8.0+ 1.0+ 3.5+ 1. 0+ 1.0+ 1.0+ 1.0+

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

Значение по умолчанию baseline
Наследуется Нет
Применяется К встроенным элементам или ячейкам таблицы.
Ссылка на спецификацию http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align

Версии CSS

CSS 1 CSS 2 CSS 2.1 CSS 3

Описание

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

Синтаксис

vertical-align: baseline|bottom|middle|sub|super|text-bottom|text-top|top|inherit | значение | проценты

Значения

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

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

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

HTML5 CSS2.1 IE Cr Op Sa Fx

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

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

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

[window.]document.getElementBy >elementID «).style.verticalAlign

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .

Центрирование в CSS: полное руководство

Центрирование элементов — самая популярная причина для жалоб на CSS. «Ну почему нельзя было сделать всё попроще?» — возмущаются все кому не лень. Думаю, проблема не в том, что это сложно сделать, а в том, что способов центрирования элементов такое множество, что бывает трудно выбрать подходящий.

Давайте построим древовидную схему для принятия решения и будем надеяться, что это всё немного упростит.

Мне нужно отцентрировать элемент…

По горизонтали

Является ли элемент строчным или строчно-* (как текст или ссылки)?

Строчные элементы внутри родительского блочного можно центрировать так:

.center-children {
  text-align: center;
}

Это сработает для элементов с типом отображения inline, inline-block, inline-table, inline-flex и т.д.

Является ли элемент блочным?

Блочный элемент можно центрировать, указав для margin-left и margin-right значение auto (а также прописав для него конкретный width, иначе он займёт всю ширину родительского контейнера и не будет нуждаться в центрировании). Для этого часто используют сокращённую запись:

.center-me {
  margin: 0 auto;
}

Способ работает независимо от ширины центрируемого блочного элемента и его родителя.

Обратите внимание, что заставить элемент плавать по центру с помощью float нельзя. Хотя есть одна хитрость.

Вам нужно центрировать несколько блочных элементов?

Если вы имеете дело с двумя и больше блочными элементами, размещёнными в ряд, которые нужно центрировать по горизонтали, возможно, вам потребуется изменить тип display. Вот что произойдёт, если указать для них тип отображения inline-block или применить flexbox:

В том же случае, если у вас несколько блочных элементов размещены друг над другом, вполне сработает приём с автоматическими отступами:

По вертикали

С вертикальным центрированием в CSS все немного сложнее:

Это элемент строчного типа или строчно-* (как текст или гиперссылки)?

Он помещается в одну строку?

Иногда строчные/текстовые элементы могут выглядеть отцентрированными по вертикали только потому, что у них одинаковые верхнее и нижнее поля (padding). 

.link {
  padding-top: 30px;
  padding-bottom: 30px;
}

Если использование полей по какой-либо причине невозможно, а вы хотите отцентрировать текст, который точно не будет переноситься в следующую строку, можно использовать хитрость с установкой line-height равной высоте элемента, это отцентрирует текст:

.center-text-trick {
  height: 100px;
  line-height: 100px;
  white-space: nowrap;
}
Элемент занимает несколько строк?

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

Если вы имеете дело с некоей имитацией таблицы, может быть, стоит использовать flexbox? Один дочерний flex-элемент можно довольно легко отцентрировать во flex-родителе. 

.flex-center-vertically {
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 400px;
}

vertical-align — Веб-технологии для разработчиков

Свойство vertical-align CSS устанавливает вертикальное выравнивание встроенного блока, блока встроенного блока или ячейки таблицы.

Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на перенос.

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

  • Для вертикального выравнивания прямоугольника встроенного элемента внутри содержащего его линейного поля.Например, его можно использовать для вертикального расположения в строке текста: 
 

вверху: 
в центре: 
внизу: 
супер: 
sub: 




text-top: 
нижний текст: 
0.2em: 
-1em: 
20%: 
-100%: 



 
 # * {
  размер коробки: рамка-рамка;
}

img {
  маржа справа: 0.5em;
}

п {
  высота: 3em;
  заполнение: 0,5 мкм;
  семейство шрифтов: моноширинный;
  оформление текста: подчеркивание поверх текста;
  маржа слева: авто;
  маржа-право: авто;
  ширина: 80%;
}
  • Для вертикального выравнивания содержимого ячейки в таблице: 
 <таблица>
  
     базовый уровень 
     вверх 
     средний 
     снизу 
    
      
 Существует теория, согласно которой, если кто-нибудь когда-нибудь узнает, для чего именно Вселенная и почему она существует, она мгновенно исчезнет и будет заменена чем-то еще более странным и необъяснимым. 


 Есть еще одна теория, согласно которой это уже произошло. 

    
  


 
 стол {
  маржа слева: авто;
  маржа-право: авто;
  ширина: 80%;
}

table, th, td {
  граница: сплошной черный 1px;
}

td {
  заполнение: 0.5em;
  семейство шрифтов: моноширинный;
}

Обратите внимание, что vertical-align применяется только к элементам inline, inline-block и table-cell: вы не можете использовать его для вертикального выравнивания элементов уровня блока.

Синтаксис 

 / * Значения ключевых слов * /
вертикальное выравнивание: базовая линия;
вертикальное выравнивание: суб;
вертикальное выравнивание: супер;
вертикальное выравнивание: верхний текст;
вертикальное выравнивание: нижний текст;
вертикальное выравнивание: по центру;
вертикальное выравнивание: сверху;
вертикальное выравнивание: снизу;

/ * значения <длина> * /
вертикальное выравнивание: 10em;
вертикальное выравнивание: 4 пикселя;

/ * значения <процент> * /
вертикальное выравнивание: 20%;

/ * Глобальные значения * /
вертикальное выравнивание: наследование;
вертикальное выравнивание: начальное;
вертикальное выравнивание: отключено;

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

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

Родительские значения

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

базовый
Выравнивает базовую линию элемента с базовой линией его родительского элемента. Базовая линия некоторых заменяемых элементов, таких как