CSS vertical-align — вирівнювання рядкових елементів по вертикалі

Властивість vertical-align задає вертикальне вирівнювання для рядкового елемента або елементу таблиці.

Властивість може бути використана у двох випадках:

• для вертикального вирівнювання рядкового елементу, який міститься в іншому рядковому елементі. Наприклад, vertical-align може бути використаний для вирівнювання картинки(<img>), яка розміщена у рядку.

• для вирівнювання по вертикалі в комірках таблиці:

• baseline - вирівнює базову лінію комірки з базовою лінією першого текстового рядка або іншого вкладеного елемента.
• bottom - вирівнює по нижньому краю комірки.
• middle - вирівнює по середині комірки.
• top - вирівнює вміст комірки по його верхньому краю.

Як значення також можна використовувати відсотки, пікселі або інші доступні одиниці. Позитивне значення зміщує елемент вгору щодо базової лінії, в той час як негативне значення опускає його вниз. При використанні відсотків, відлік ведеться від значення властивості line-height, при цьому 0% аналогічно значенню baseline.

правити

Загальний опис

правити

Нотатка

Допустимі до використання негативні значення. Зверніть увагу, що властивість vertical-align не впливає на блокові елементи!

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

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

Властивість vertical-align може отримувати 12 значень:

baseline

Вирівнює базову лінію поточного елемента за базовою лінії батька.

автор: Svitlana

правити

length

Піднімає або опускає елемент на задану відстань. Від'ємні значення дозволені.

автор: Svitlana

правити

sub

Елемент зображується як підрядковий у вигляді нижнього індексу. Розмір шрифту при цьому не змінюється

автор: Svitlana

правити

super

Елемент зображується як надрядковий у вигляді верхнього індексу. Розмір шрифту залишається незмінним.

автор: Svitlana

правити

top

Вирівнювання верхнього краю елемента по вершині найвищого елемента рядка.

автор: Svitlana

правити

text-top

Верхня межа елемента вирівнюється за найвищим текстовим елементом поточного рядка.

автор: Svitlana

правити

middle

Елемент буде по середині батьківського елемента.

автор: Svitlana

правити

bottom

Вирівнює основу поточного елемента по нижній частині рядкового елемента, розташованого нижче всіх.

автор: Svitlana

правити

text-bottom

Основа елемента вирівнюється по самому нижньому краю поточного рядка.

автор: Svitlana

правити

%

Піднімає або опустити елемент у відсотках від властивості line-height. Від'ємні значення дозволені.

автор: Svitlana

правити

initial

Встановлює властивість у значення без задання

автор: Svitlana

правити

inherit

Вказує на спадковість властивості від свого батьківського елемента.

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1	4	12	4

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Приклади

+ запропонувати свій приклад у пісочниці

<p>Рядок тексту з <img class="tt" src="/img/logo.svg" alt="text-top"> картинкою text-top і <img class="bl" src="/img/logo.svg" alt="baseline"> картинкою baseline.</p>

img {
    width: 40px;
}

.tt { vertical-align: text-top; }
.bl { vertical-align: baseline; }

<div class="info">
	<p>За допомогою властивості <code>vertical-align</code> ми можемо задати вертикальне вирівнювання для рядкового елемента.</p>
	<p>Для кожного нащадка нижче задано різне вирівнювання: <em>top</em>, <em>middle</em> i <em>bottom</em> відповідно. Темний блок відіграє роль контенту в блоці, відносно якого ми і вирівнюємо заголовки.</p>
</div>

<div class="wrapper">
	<div class="block one">
		<h2 class="child">top</h2>
		<div class="content"></div>
	</div>
	<div class="block two">
		<h2 class="child">middle</h2>
		<div class="content"></div>
	</div>
	<div class="block three">
		<h2 class="child">bottom</h2>
		<div class="content"></div>
	</div>
</div>

* {
	box-sizing: border-box;
}

body {
	font-family: monospace;
	font-size: 17px;
}

.info {
	padding: 4px 6px;
}

code {
	font-weight: 700;
	color: #444;
	border-bottom: 2px solid #666;
}

.wrapper {
	display: flex;
	justify-content: space-around;
}

.block {
	background-color: gold;
	font-size: 12px;
}

.block .child {
	display: inline-block;
  margin: 0;
  width: 100px;
  text-align: center;
  color: #353535;
}

.content {
	height: 150px;
	width: 15px;
	background-color: #666;
	display: inline-block;
}

.block.one > * {
	vertical-align: top;
}

.block.two > * {
	vertical-align: middle;
}

.block.three > * {
	vertical-align: bottom;
}

<p>Типово по базовій лінії: <span class="icon"></span> іконка сидить низько.</p>

<p class="fix">З vertical-align: middle: <span class="icon"></span> іконка на місці.</p>

<div class="center">А блок у блоці центрує flex, а не vertical-align</div>

.icon {
    display: inline-block;
    width: 22px;
    height: 22px;
    background: #2b6cb0;
    border-radius: 4px;
}

.fix .icon {
    vertical-align: middle;
}

.center {
    display: flex;
    align-items: center;
    height: 70px;
    padding: 0 10px;
    border: 1px solid #666;
}

<table>
<tbody>
	<tr>
		<td style="vertical-align: baseline;">baseline</td>
		<td style="vertical-align: top;">top</td>
		<td style="vertical-align: middle;">middle</td>
		<td style="vertical-align: bottom;">bottom</td>
	</tr>
	</tbody>
</table>

table {
	font-family: monospace;
	font-size: 17px;
	color: #222;
  text-align: center;
}

td {
  height: 150px;
  width: 125px;
}

table,
td {
  border: 2px solid #666;
}

<p>Значення(ключові слова) для властивості <code>vertical-align</code>, які найчастіше використовуються:</p>
<hr>
<select id="form">
  <option value="baseline">baseline</option>
  <option value="sub">sub</option>
  <option value="super">super</option>
  <option value="top">top</option>
  <option value="middle">middle</option>
  <option value="bottom">bottom</option>
</select>
<hr>

<p class="example"><span id="text">Це приклад роботи властивості: </span><strong>example</strong></p>

body {
  font-family: monospace;
  font-size: 17px;
  line-height: 1.54;
}

strong {
  color: coolgrey;
  border: 1px solid orange;
}

#text {
  text-decoration: overline underline;
}

var text = document.getElementById('text');
var form = document.getElementById('form');

form.onchange = function () {
  for (var i = 0; i < form.options.length; i++) {if (window.CP.shouldStopExecution(0)) break;
    if (form.options[i].selected == true) {
      text.style.verticalAlign = form.options[i].value;
    }
  }window.CP.exitedLoop(0);
};
//# sourceURL=pen.js

<div>
	<p id="one">Це просто текст із картинкою: <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E" alt="star" height="17px" width="17px"></p>
	<p id="two">Це просто текст із картинкою: <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E" alt="star" height="17px" width="17px"></p>
	<p id="three">Це просто текст із картинкою: <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E" alt="star" height="17px" width="17px"></p>
</div>

body {
  font-size: 17px;
  font-family: monospace;
  color: #222;
  padding: 36px;
}

p {
  background-color: #f1f1f1;
  padding: 16px;
  text-decoration: underline overline;
}

#one img {
  vertical-align: baseline;
}

#two img {
  vertical-align: bottom;
}

#three img {
  vertical-align: middle;
}