JS властивість CSSStyleDeclaration.verticalAlign

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

element.style.verticalAlign - це властивість CSS, яку можна використовувати через JavaScript для вирівнювання елемента по вертикалі відносно його батьківського контейнера або сусідніх елементів. Ця властивість зазвичай застосовується до рядкових елементів або елементів з властивістю display: inline-block.

Значення verticalAlign можуть бути наступними: baseline, sub, super, top, text-top, middle, bottom, text-bottom, а також відсоткові або числові значення. Значення baseline вирівнює елемент по базовій лінії його батьківського елемента, це значення за замовчуванням. Значення sub і super вирівнюють елемент відповідно як нижній індекс (subscript) і верхній індекс (superscript). Значення top і text-top вирівнюють елемент по верхньому краю батьківського елемента або по верхній лінії тексту відповідно. Значення middle вирівнює елемент по середині рядка, а значення bottom і text-bottom вирівнюють елемент по нижньому краю батьківського елемента або нижній лінії тексту відповідно.

Розглянемо декілька прикладів використання властивості verticalAlign через JavaScript.

Приклад 1: Вирівнювання тексту в середині рядка. Це корисно, коли ви хочете, щоб текст у кнопці або іншому елементі був вирівняний по вертикалі по середині.

var element = document.getElementById('myElement');
element.style.display = 'inline-block';
element.style.verticalAlign = 'middle';

У цьому прикладі елемент з id myElement буде вирівняний по вертикалі по середині рядка.

Приклад 2: Вирівнювання зображення по нижньому краю тексту. Це корисно, коли ви хочете, щоб зображення всередині текстового блоку вирівнювалось по нижньому краю тексту.

var imgElement = document.getElementById('myImage');
imgElement.style.verticalAlign = 'text-bottom';

У цьому прикладі зображення з id myImage буде вирівняне по нижньому краю тексту.

Приклад 3: Використання відсоткових значень для вирівнювання. Це дозволяє вам більш точно налаштувати позицію елемента відносно його батьківського елемента.

var element = document.getElementById('myElement');
element.style.verticalAlign = '25%';

У цьому прикладі елемент з id myElement буде вирівняний по вертикалі на 25% від висоти батьківського елемента.

Використання властивості verticalAlign допомагає краще контролювати вертикальне вирівнювання елементів на вашій веб-сторінці, дозволяючи вам створювати більш естетичний та функціональний дизайн. Це особливо корисно для вирівнювання тексту, зображень та інших інлайн-елементів, забезпечуючи правильне розташування контенту в межах рядка або контейнера.

Порада:

Коли потрібно вирівняти рядкові елементи, наприклад, зображення та текст, використовуйте значення baseline. Це допоможе забезпечити, що всі елементи будуть вирівняні по одній базовій лінії, створюючи більш узгоджений вигляд. Наприклад, якщо у вас є рядок тексту з декількома зображеннями, використання baseline допоможе підтримувати їх вирівняними на одній лінії з текстом.

Порада:

Для створення верхнього або нижнього індексу (super або subscript) тексту, використовуйте значення super або sub. Це може бути корисно в математичних або хімічних формулах, де потрібно відображати індекси. Наприклад, для відображення хімічного елементу H₂O, ви можете застосувати element.style.verticalAlign = 'sub' для цифри 2.

Синтаксис

element.style.verticalAlign

Значення

Return

Переглядачі

Переглядач
	1	1	3	8	12

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

Переглядач
	-	-

Приклади

Цей приклад дозволяє користувачам взаємодіяти з перемикачем для вибору вертикального вирівнювання. Вибір змінює вертикальне вирівнювання як тексту, так і зображення в контейнері, демонструючи, як властивість verticalAlign впливає на елементи на веб-сторінці.


  See the Pen <a href="https://codepen.io/css_in_ua/pen/QWXvXNO">
  Untitled</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)
  on <a href="https://codepen.io">CodePen</a>.

У цьому прикладі іконка та текст вирівнюються по вертикалі по середині всередині кнопки. Це дозволяє створити естетично привабливі кнопки з іконками, де текст і іконка знаходяться на одному рівні, забезпечуючи гармонійний вигляд елементів.

var button = document.getElementById('iconButton');
var icon = document.createElement('span');
var text = document.createElement('span');

icon.textContent = '🔍'; // Іконка пошуку
text.textContent = 'Пошук';

// Додаємо стилі для вертикального вирівнювання
icon.style.display = 'inline-block';
icon.style.verticalAlign = 'middle';
text.style.display = 'inline-block';
text.style.verticalAlign = 'middle';

// Додаємо іконку та текст до кнопки
button.appendChild(icon);
button.appendChild(text);

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

var container = document.getElementById('imageContainer');
var image = document.createElement('img');
var caption = document.createElement('div');

image.src = 'path/to/image.jpg';
caption.textContent = 'Це підпис до зображення';

// Додаємо стилі для вертикального вирівнювання
image.style.display = 'inline-block';
image.style.verticalAlign = 'bottom';
caption.style.display = 'inline-block';
caption.style.verticalAlign = 'top';

// Додаємо зображення та підпис до контейнера
container.appendChild(image);
container.appendChild(caption);

JS довідник

JavaScript

Наповнення JS розділу