Vertical align свойство – Свойство vertical-align, вертикальное выравнивание текста — Оформление текста — HTML Academy — Вебджем.рф

Содержание

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

CSS: vertical-align — свойство; описание и примеры использования.

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

Для этого свойства важно помнить что:

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

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

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

Значения

Свойство vertical-align: значения
Значение	Пример
baseline	Базовая линия элемента совпадает с базовой линией родителя. Если родительский элемент не имеет базовой линии, то за неё принимается нижняя граница элемента.
bottom	Выравнивает нижнюю границу элемента по нижней границе того элемента из строки, чья нижняя граница является самой низкой.
middle	Выравнивает середину элемента по базовой линии элемента родителя.
sub	Элемент отображается в виде нижнего индекса. На размер шрифта это значение не влияет.
super	Элемент отображается в виде верхнего индекса. На размер шрифта это значение не влияет.
text-top	Верхняя граница элемента выравнивается по самому высокому текстовому элементу текущей строки.
text-bottom	Нижняя граница элемента выравнивается по самому нижнему краю текущей строки.
top	Выравнивание верхней границы элемента по верхней границе самого высокого элемента строки.
inherit	Значение наследуется от родителя.

Примеры

Давайте рассмотрим работу свойства vertical-align на нескольких примерах. Присвоим разные значения строчно-блочным элементам.

Для начала посмотрим работу этого свойства со значением baseline, используемым по умолчанию.

В примере создадим контейнер #container, внутри которого будем размещать наши строчно-блочные элементы #small и #big для экспериментов.

<!DOCTYPE html>
<html>
<head>
	<title>Свойство vertical-align.</title>
<style>
    #container{
        width: 400px;
        height: 100px;
        border: 1px solid black;
        padding: 2px;	/* Устанавливаем внутренний отступ */
        margin: 0 auto;	/* Размещщаем блок по центру */
    }
    #small, #big{
        border: 1px solid red;
        display: inline-block;
        margin: 2px;
        /* Выравниваем вертикально по базовой линии */
        vertical-align: baseline;
    }
    #big{
        font-size:42px;
    }
</style>
</head>
<body>

<div>
	<div>текст1</div>
	<div>у</div>
</div>

</body>
</html>

Вот результат работы этого кода:

Границы строчно-блочных элементов выделены красным цветом.

Мы видим, что наш текст отформатирован так, как будто он написан в тетрадке. Я специально выбрал символ строчная буква «у», она пишется с «хвостиком» ниже базовой линии.

Теперь поменяем значение свойства vertical-align на bottom:

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

Далее, поменяем значение свойства vertical-align на middle:

Теперь элементы в строке выровнены по центру.

Ну и последний пример, поменяем значение свойства vertical-align на top:

Имеем ожидаемый результат: строчно-блочные элементы размещены по верхнему краю строки.

Задача посложнее

Давайте теперь решим такую задачу: нам нужно в этом контейнере разместить текст по центру вертикали контейнера #container.

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

Высота нашего контейнера height: 100px. Только тут нужно учитывать то, что у нашего контейнера уже есть padding: 2px, который накладывается с margin: 2px строчно-блочных элементов, но у них есть border: 1px, который также нужно учесть.

То есть, корректная высота строки line-height будет равна: height: 100px минус (padding: 2px + border: 1px) *2 (так как нужно учитывать верх и них) = 94px.

Итак, код:

<!DOCTYPE html>
<html>
<head>
	<title>Свойство vertical-align.</title>
<style>
    #container{
        width: 400px;
        height: 100px;
        border: 1px solid black;
        padding: 2px;
        margin: 0 auto;
    }
    #small, #big{
        border: 1px solid red;
        display: inline-block;
        margin: 2px;
        /* Устанавливаем высоту строки */
        line-height: 94px;
        vertical-align: middle;
    }
    #big{
        font-size:42px;
    }
</style>
</head>
<body>

<div>
	<div>текст1</div>
	<div>у</div>
</div>

</body>
</html>

Результат:

Другие значение: проценты, пикселы и т.д.

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

Если использовать пикселы или другие доступные в CSS единицы, то положительное число смещает элемент вверх относительно базовой линии, отрицательное число опускает элемент вниз.

Работа с ячейками таблицы

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

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

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

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

[window.]document.getElementById("ID").style.verticalAlign

Свойство vertical-align, вертикальное выравнивание текста — Оформление текста — HTML Academy

HTML

<!DOCTYPE html> <html lang=»ru»> <head> <meta charset=»utf-8″> <title>Сайт начинающего верстальщика</title> <link rel=»stylesheet» href=»style.css»> </head> <body> <header> <h2>Сайт начинающего верстальщика</h2> </header> <main> <div> <img src=»img/raccoon.svg» alt=»Аватарка»> </div> <nav> <h3>Записи в блоге</h3> <ul> <li><a href=»day-1.html»>День первый. Как я забыл покормить кота</a></li> <li><a href=»day-2.html»>День второй. Хочу быть верстальщиком</a></li> <li><a href=»day-3.html»>День третий. Мой кот на меня обиделся</a></li> <li><a href=»day-4.html»>День четвёртый. Как я чуть не заболел</a></li> <li><a href=»day-5.html»>День пятый. Отдыхаю</a></li> <li><a href=»day-6.html»>День шестой. Как я ничего не понял, продолжение</a></li> <li><a href=»day-7.html»>День седьмой. Кекс выдал мне задание</a></li> <li><a href=»day-8.html»>День восьмой. Очень серьёзный</a></li> <li><a href=»day-9.html»>День девятый. Точнее ночь</a></li> <li><a href=»day-10.html»>День десятый. Подведение итогов</a></li> <li><a href=»day-11.html»>День одиннадцатый. Без фанатизма</a></li> <li><a href=»day-12.html»>День двенадцатый. Все любят печенье</a></li> <li><a href=»day-13.html»>День тринадцатый. Нашёл статью</a></li> <li><a href=»day-14.html»>День четырнадцатый. Новый формат</a></li> <li><a href=»day-15.html»>День пятнадцатый. Галерея селфи</a></li> </ul> </nav> <section> <p>Всем привет! Добро пожаловать на мой первый сайт. Ещё недавно я понятия не имел, кто такой верстальщик, а теперь я нашёл <a href=»https://htmlacademy.ru/courses»>интерактивные курсы по HTML и CSS</a> и поставил перед собой цель — стать им. У меня даже появился инструктор — Кекс, который не позволит мне расслабиться и будет следить за моими успехами.</p> <p>Моё первое задание — вести дневник и честно писать обо всех своих свершениях.</p> </section> <section> <h3>Навыки</h3> <dl> <dt>HTML</dt> <dd><div>60%</div></dd> <dt>CSS</dt> <dd><div>20%</div></dd> <dt>JS</dt> <dd><div>10%</div></dd> </dl> </section> </main> <footer> Подвал сайта </footer> </body> </html>

CSS

body { padding: 0 30px; font-size: 16px; line-height: 26px; font-family: «Arial», sans-serif; color: #222222; background: #ffffff url(«img/bg-page.png») no-repeat top center; } h2 { font-size: 24px; line-height: normal; } h3 { font-size: 20px; line-height: normal; } a { color: #0099ef; text-decoration: underline; } .page-title { font-weight: bold; font-size: 36px; line-height: 42px; font-family: «Verdana», sans-serif; text-align: center; } .avatar-container { text-align: center; } .avatar { border-radius: 50%; } .blog-navigation { margin-bottom: 30px; padding: 20px; color: #ffffff; background-color: #4470c4; border: 5px solid #2d508f; } .blog-navigation h3 { margin-top: 0; } .blog-navigation ul { padding-left: 0; list-style: none; } .blog-navigation li { margin-bottom: 5px; } .blog-navigation a { color: #ffffff; } .skills dd { margin: 0; margin-bottom: 10px; background-color: #e8e8e8; } .skills-level { font-size: 12px; text-align: center; color: #ffffff; background-color: #4470c4; } .skills-level-ok { background-color: #47bb52; } footer { margin-top: 30px; }

CSS свойство vertical-align

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

CSS синтаксис

vertical-align: значение;

Возможные значения

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

Пример

Устанавливаем вертикальное выравнивание изображения


img {
     vertical-align: text-top;
}

vertical-align | Вертикальное выравнивание текста

vertical-align [w3.org] работает только с элементами таблицы и inline-элементами (в т.ч. с display: inline-block;).

`vertical-align` для элементов таблицы и для `display: table-cell;`

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

▼ baseline top bottom

текст

строка1
строка2

<style>
.demotable {
  background: #E7D5C0;
}
.demotable td {
  height: 150px;
  border: 1px dashed #E7D5C0;
  background: #fff5d7;
  vertical-align: middle; baseline; top; bottom; 
}
</style>

<table>
  <tr>
    <td><img src="http://2.bp.blogspot.com/-ucwWGxkrync/TQqQM2MIxqI/AAAAAAAABJo/241YgHBwh3Y/s72-c/Logo-Blogger.png" alt="Blogger"/>
    <td>текст
    <td><div>строка1<br>строка2</div>
</table>

Строка
Базовая линия (англ. baseline, или линия шрифта) — это воображаемая линия, проходящая по нижнему краю символов без учёта свисаний, например, как у букв «ц», «д», «р», «щ».

display: table-cell; похож на <td>. Высота элемента с display: table-cell; равна высоте наиболее высокого элемента с display: table-cell; из группы. vertical-align тут также выравнивает содержимое по вертикали, но уже по умолчанию имеет значение baseline.

▼ middle top bottom

текст

строка1
строка2

<style>
.demotable {
  background: #E7D5C0;
}
.demotable > div {
  display: table-cell;
  height: 150px; 
  border: 1px dashed #E7D5C0;
  background: #fff5d7;
  vertical-align: baseline;middle;top;bottom;
}
</style>

<div>
    <div><img src="http://2.bp.blogspot.com/-ucwWGxkrync/TQqQM2MIxqI/AAAAAAAABJo/241YgHBwh3Y/s72-c/Logo-Blogger.png" alt="Blogger"/></div>
    <div>текст</div>
    <div><div>строка1<br>строка2</div></div>
</div>

Если элемент с display: table-cell; нужно выровнять по высоте родителя, то родителю нужно указать display: table; или display: inline-table;.

▼ display: table;

текст

строка1
строка2

<style>
.demotable {
  display: table;
  height: 150px; 
  background: #E7D5C0;
}
.demotable > div {
  display: table-cell;
  border: 1px dashed #E7D5C0;
  background: #fff5d7;
  vertical-align: middle;
}
</style>

<div>
    <div><img src="http://2.bp.blogspot.com/-ucwWGxkrync/TQqQM2MIxqI/AAAAAAAABJo/241YgHBwh3Y/s72-c/Logo-Blogger.png" alt="Blogger"/></div>
    <div>текст</div>
    <div><div>строка1<br>строка2</div></div>
</div>

`vertical-align` у элементов с `display: inline;`, `display: inline-block;` и `display: inline-table;`

vertical-align у строчных тегов выравнивает по вертикали сам элемент относительно родителя, если его высота меньше высоты текущей строки родителя (свойство line-height).

▼ top text-top middle bottom text-bottom inherit Отступ сверху: px
Высота элемента: px
Отступ снизу: px

<style>
.sem {
  background: #fff5d7;
  line-height: 150px;
  font-size: 0; 
}
.sem div {
  display: inline-block;
  font-size: medium;
  line-height: normal;
  vertical-align: baselinetoptext-topmiddlebottomtext-bottominherit ;
}
</style>

<div><div>

</div></div>

Или относительно соседних элементов, находящихся на данной строке.

▼ top text-top middle bottom text-bottom sub super inherit Элемент _<sub>Текст строки x ^<sup>display: inline-block;

<style>
b {
  font-size: 150%;
  vertical-align: baseline; top; text-top; middle; bottom; text-bottom; sub; super; inherit; 
}
span {
  display: inline-block;
  height: 5em;
}
</style>

<b>Элемент</b> <sub>&lt;sub&gt;</sub> Текст строки x <sup>&lt;sup&gt;</sup> <span>display: inline-block;</span> <img src="http://2.bp.blogspot.com/-ucwWGxkrync/TQqQM2MIxqI/AAAAAAAABJo/241YgHBwh3Y/s72-c/Logo-Blogger.png" alt="Blogger"/>

Практическое использование: Как сделать обтекание картинки текстом.

Или vertical-align сам увеличивает строку родителя на значение, указанное в px или %.

% px Элемент _<sub>Текст строки x ^<sup>display: inline-block;

<style>
b {
  font-size: 150%;
  vertical-align: baseline;
}
span {
  display: inline-block;
  height: 100px;
}
</style>

<b>Элемент</b> <sub>&lt;sub&gt;</sub> Текст строки x <sup>&lt;sup&gt;</sup> <span>display: inline-block;</span> <img src="http://2.bp.blogspot.com/-ucwWGxkrync/TQqQM2MIxqI/AAAAAAAABJo/241YgHBwh3Y/s72-c/Logo-Blogger.png" alt="Blogger"/>

`vertical-align` не работает

Ещё раз хочу обратить внимание на то, что для inline-элементов vertical-align: middle;:

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

у родителя без соседей ура, оно!

<style>
.parent {
  min-height: 150px; 
  background: #E7D5C0;
  text-align: center;
  vertical-align: middle;
  display: inline-block;
  width: 100%;
}
.parent div {
  max-width: 300px; 
  width: 100%; 
  height: 100px; 
  background: #fff5d7; 
  text-align: left; 
  display: inline-block;
  vertical-align: middle;
  vertical-align: middle;
}
.parent:before {
  content: "";
  display: inline-block;
  min-height: inherit;
  height: 100%;
  vertical-align: middle;
}
</style>

<div><div></div></div>

Этот вариант вертикального выравнивания текста по центру блока предпочтителен, поскольку line-height может не поддерживаться мобильными браузерами, такими как Opera Mini [opera.com], и равнозначен с display: table-cell;.

seodon.ru | CSS справочник — vertical-align

Опубликовано: 18.08.2010 Последняя правка: 10.12.2015

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

Базовая линия — это воображаемая линия, проходящая по нижнему краю символов. Некоторые буквы (щ, ц, у, д, р, ф) частично выходят за базовую линию.
Если у элемента нет базовой линии (как, например, у изображений или блочных элементов), то в ее роли выступает внешний край нижнего поля (margin-bottom).
Базовая линия ячейки таблицы — это базовая линия ее первой строки текста или первого блока (смотря, что стоит в начале). Если такого текста или блока нет, то это низ ячейки.
Базовая линия ряда HTML-таблицы — это базовая линия, общая для всех ячеек этого ряда.

Тип свойства

Назначение: форматирование.

Применяется: к встроенным (уровня строки) элементам, ячейкам таблиц (<TD>, <TH>) и элементам с display равным table-cell.

Наследуется: нет.

Значения

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

baseline — выравнивает базовую линию элемента относительно базовой линии его родителя.
middle — выравнивает середину элемента по вертикали с базовой линией родителя плюс половина x-height этого родителя, где x-height — это высота строчной буквы x. Обратите внимание, что в данном случае берется середина именно самого элемента, а не его возможных элементов-потомков (которые могут быть выше), как и x-height самого родителя.
sub — смещает базовую линию элемента до уровня нижнего индекса родительского контейнера, но размер шрифта элемента при этом остается неизменным.
super — смещает базовую линию элемента до уровня верхнего индекса родительского контейнера, но размер шрифта элемента при этом остается неизменным.
text-top — выравнивание верха элемента по верхней точке самого высокого текстового символа родителя. Обратите внимание, что в данном случае выравнивается верх именно самого элемента, а не верх его возможных элементов-потомков (которые могут оказаться выше), как и верх самого родителя.
text-bottom — выравнивание низа элемента по нижней точке текстовых символов родителя.
top — выравнивание верха элемента, но уже с учетом его возможных потомков, по верхней точке самого высокого элемента в строке (а не у родителя).
bottom — выравнивание низа элемента, но уже с учетом его возможных потомков, по самой нижней точке строки.
Размер — вертикальное смещение элемента относительно базовой линии родителя, указанное в относительных или абсолютных единицах принятых в CSS, например: пиксели (px), пункты (pt), сантиметры (cm) и т.д. При этом отрицательные значения смещают элемент вниз, а положительные — вверх, то есть значение 0 эквивалентно baseline.
Проценты — вертикальное смещение элемента относительно базовой линии родителя, указанное в процентах (%), где за 100% берется line-height самого элемента, а не его родителя. При этом отрицательные значения смещают элемент вниз, а положительные — вверх, то есть значение 0% эквивалентно baseline.
inherit — наследует значение vertical-align от родительского элемента.

Однако, к ячейкам таблицы можно применять ограниченный набор значений vertical-align, которые имеют следующий смысл:

baseline — базовая линия ячейки выравнивается по базовой линии ряда, в которой она расположена. Если ячейка объединена и состоит из нескольких рядов, то берется базовая линия первого ряда.
top — верх содержимого ячейки выравнивается относительно ее верха.
middle — центр содержимого ячейки выравнивается относительно ее центра.
bottom — низ содержимого ячейки выравнивается относительно ее низа.

Процентная запись: относительно line-height самого элемента.

Значение по умолчанию: baseline.

Хотя в спецификации CSS об этом и не сказано, но по умолчанию все браузеры выравнивают содержимое ячеек согласно vertical-align со значением middle, то есть по спецификации HTML.

Синтаксис

Пример CSS: использование vertical-align

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - CSS свойство vertical-align</title>
  <style type="text/css">
   table {
    width: 300px; /* ширина таблицы */
    border: 2px #000 solid; /* стили рамки */
   }
   td {
    border: 2px #000 solid; /* стили рамок ячеек */
    height: 60px; /* высота ячеек */
    vertical-align: baseline; /* выравнивание */
   }
  </style>
 </head>
 <body>
  <table>
   <tr>
    <td><img src="images/fly.gif" alt="Бабочка"></td>
    <td>Ячейка 1.2</td>
    <td>Ячейка 1.3</td>
   </tr>
   <tr>
    <td>Ячейка 2.1</td>
    <td>Ячейка 2.2</td>
    <td>Ячейка 2.3</td>
   </tr>
  </table>
 </body>
</html>

Результат примера

Результат. Использование свойства CSS vertical-align в браузере Opera.

Версии CSS

Версия:	CSS 1	CSS 2	CSS 2.1	CSS 3
Поддержка:	Да	Да	Да	Да

Браузеры

Браузер:	Internet Explorer		Google Chrome	Mozilla Firefox	Opera	Safari
Версия:	6.0 и 7.0	8.0 и выше	2.0 и выше	2.0 и выше	9.2 и выше	3.1 и выше
Поддержка:	Частично	Да	Частично	Частично	Да	Частично

Internet Explorer 6.0 и 7.0 не понимают значение inherit.

Chrome, Firefox и Safari без причин увеличивают заданную высоту ячейки таблицы при vertical-align:baseline, если ее содержимое начинается с блочного или замещаемого элемента (как на примере выше).

CSS | Свойство вертикального выравнивания

<!DOCTYPE html>

<html>

<head>

<title>

CSS vertical-align Property

</title>

<style>

.img1 {

vertical-align: baseline;

}

.img2 {

vertical-align: sub;

}

.img3 {

vertical-align: super;

}

.img4 {

vertical-align: text-top;

}

.img5 {

vertical-align: text-bottom;

}

.img6 {

vertical-align: middle;

}

.img7 {

vertical-align: top;

}

.img8 {

vertical-align: bottom;

}

.img9 {

vertical-align: 25px;

}

img.img10 {

vertical-align: 100%;

}

.img11 {

vertical-align: baseline;

}

.img12 {

vertical-align: inherit;

}

</style>

</head>

<body>

<h3>vertical-align: baseline</h3>

<p>

<img class = "img1" src =

"https://media.geeksforgeeks.org/wp-content/uploads/gfgc.png"

alt = "" class="alignnone size-medium wp-image-862984" />

A computer science portal

</p><br>

<h3>vertical-align: sub</h3>

<p>

<img class = "img2" src =

"https://media.geeksforgeeks.org/wp-content/uploads/gfgc.png"

alt = "" class="alignnone size-medium wp-image-862984" />

A computer science portal

</p><br>

<h3>vertical-align: super</h3>

<p>

<img class = "img3" src =

"https://media.geeksforgeeks.org/wp-content/uploads/gfgc.png"

alt = "" class="alignnone size-medium wp-image-862984" />

A computer science portal

</p><br>

<h3>vertical-align: text-top</h3>

<p>

<img class = "img4" src =

"https://media.geeksforgeeks.org/wp-content/uploads/gfgc.png"

alt = "" class="alignnone size-medium wp-image-862984" />

A computer science portal

</p><br>

<h3>vertical-align: text-bottom</h3>

<p>

<img class = "img5" src =

"https://media.geeksforgeeks.org/wp-content/uploads/gfgc.png"

alt = "" class="alignnone size-medium wp-image-862984" />

A computer science portal

</p><br>

<h3>vertical-align: middle</h3>

<p>

<img class = "img6" src =

"https://media.geeksforgeeks.org/wp-content/uploads/gfgc.png"

alt = "" class="alignnone size-medium wp-image-862984" />

A computer science portal

</p><br>

<h3>vertical-align: top</h3>

<p>

<img class = "img7" src =

"https://media.geeksforgeeks.org/wp-content/uploads/gfgc.png"

alt = "" class="alignnone size-medium wp-image-862984" />

A computer science portal

</p><br>

<h3>vertical-align: bottom</h3>

<p>

<img class = "img8" src =

"https://media.geeksforgeeks.org/wp-content/uploads/gfgc.png"

alt = "" class="alignnone size-medium wp-image-862984" />

A computer science portal

</p><br>

<h3>vertical-align: length</h3>

<p>

<img class = "img9" src =

"https://media.geeksforgeeks.org/wp-content/uploads/gfgc.png"

alt = "" class="alignnone size-medium wp-image-862984" />

A computer science portal

</p><br>

<h3>vertical-align: percentage</h3>

<p>

<img class = "img10" src =

"https://media.geeksforgeeks.org/wp-content/uploads/gfgc.png"

alt = "" class="alignnone size-medium wp-image-862984" />

A computer science portal

</p><br>

<h3>vertical-align: initial</h3>

<p>

<img class = "img11" src =

"https://media.geeksforgeeks.org/wp-content/uploads/gfgc.png"

alt = "" class="alignnone size-medium wp-image-862984" />

A computer science portal

</p><br>

<h3>vertical-align: inherit</h3>

<p>

<img class = "img12" src =

"https://media.geeksforgeeks.org/wp-content/uploads/gfgc.png"

alt = "" class="alignnone size-medium wp-image-862984" />

A computer science portal

</p>

</body>

</html>

Vertical align свойство – Свойство vertical-align, вертикальное выравнивание текста — Оформление текста — HTML Academy

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

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

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

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

Версия CSS

Наследуется

Анимируемое

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

CSS: vertical-align — свойство; описание и примеры использования.

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

Значения

Примеры

Задача посложнее

Другие значение: проценты, пикселы и т.д.

Работа с ячейками таблицы

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

Свойство vertical-align, вертикальное выравнивание текста — Оформление текста — HTML Academy

CSS свойство vertical-align

vertical-align | Вертикальное выравнивание текста

`vertical-align` для элементов таблицы и для `display: table-cell;`

`vertical-align` у элементов с `display: inline;`, `display: inline-block;` и `display: inline-table;`

`vertical-align` не работает

seodon.ru | CSS справочник — vertical-align

Тип свойства

Значения

Синтаксис

Версии CSS

Браузеры

CSS | Свойство вертикального выравнивания

Добавить комментарий Отменить ответ

Рубрики

Vertical align свойство – Свойство vertical-align, вертикальное выравнивание текста — Оформление текста — HTML Academy

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

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

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

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

Версия CSS

Наследуется

Анимируемое

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

CSS: vertical-align — свойство; описание и примеры использования.

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

Значения

Примеры

Задача посложнее

Другие значение: проценты, пикселы и т.д.

Работа с ячейками таблицы

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

Свойство vertical-align, вертикальное выравнивание текста — Оформление текста — HTML Academy

CSS свойство vertical-align

vertical-align | Вертикальное выравнивание текста

vertical-align для элементов таблицы и для display: table-cell;

vertical-align у элементов с display: inline;, display: inline-block; и display: inline-table;

vertical-align не работает

seodon.ru | CSS справочник — vertical-align

Тип свойства

Значения

Синтаксис

Версии CSS

Браузеры

CSS | Свойство вертикального выравнивания

Добавить комментарий Отменить ответ

Рубрики

`vertical-align` для элементов таблицы и для `display: table-cell;`

`vertical-align` у элементов с `display: inline;`, `display: inline-block;` и `display: inline-table;`

`vertical-align` не работает