У CSS властивість vertical-align контролює вертикальне вирівнювання елементів вбудованого рівня або комірок таблиці в межах елемента, що їх містить. Це стосується елементів, які є частиною рядка тексту або відображаються як вбудований блок чи клітинка таблиці.

Властивість 'vertical-align' зазвичай використовується для вбудованих елементів, таких як зображення, текст або елементи вбудованих блоків у межах рядка тексту. Це не стосується безпосередньо елементів рівня блоку; однак ви можете використовувати такі методи, як flexbox або позиціонування, щоб вирівняти їх вертикально.

Синтаксис:

Ось базовий синтаксис для властивості vertical-align:

 selector { vertical-align: value; } 

«Значення» може бути одним із таких параметрів:

Базова лінія:Вирівнює базову лінію елемента з базовою лінією його батьківського елемента. Це значення за умовчанням для більшості елементів.Суб:Вирівнює базову лінію елемента з базовою лінією нижнього індексу шрифту батьківського елемента.Супер:Вирівнює базову лінію елемента з базовою лінією верхнього індексу шрифту батьківського елемента.Вгорі:Вирівняйте верхню частину елемента з верхньою частиною найвищого елемента на лінії в рамці лінії.Текст вгорі:Вирівнює верхню частину елемента з верхньою частиною шрифту батьківського елемента.Середній:Центрує елемент по вертикалі відносно батьківського елемента.Внизу:Вирівняйте нижню частину елемента з нижньою частиною найнижчого елемента на лінії в рамці лінії.Текст внизу:Вирівняйте нижню частину елемента з нижньою частиною шрифту батьківського елемента.Відсоток:Елемент вирівнюється по вертикалі на заданому відсотку від висоти лінії. Наприклад, vertical-align: 50% відцентрує елемент вертикально в його батьківському елементі.

ПРИМІТКА. Пам’ятайте, що 'vertical-align' має особливу поведінку залежно від типу елемента та контексту, у якому він використовується, тому його ефекти можуть бути не завжди однозначними. Це особливо корисно для вирівнювання вбудованих елементів із текстом або іншими вбудованими елементами.

Приклади

Ось деякі додаткові відомості та приклади, пов’язані з властивістю «vertical-align» у CSS:

1. Вирівнювання базової лінії:

Базова лінія вертикального вирівнюванняvalue вирівнює базову лінію елемента з базовою лінією його батьківського елемента. Це типова поведінка для більшості елементів вбудованого рівня.

Базовий рівень Інший текст

2. Нижній і верхній індекси:

Вертикальне вирівнювання:Підзначення вирівнює базову лінію елемента з базовою лінією нижнього індексу шрифту батьківського елемента, завдяки чому він виглядає як нижній індекс. З іншого боку,вертикальне вирівнювання:Super вирівнює базову лінію елемента з базовою лінією верхнього індексу шрифту батьківського елемента.

Х₂О — вода. х²+ і²= r²

3. Вирівнювання зверху та знизу:

Вертикальне вирівнювання:Верхнє значення вирівнює верхню частину елемента з верхньою частиною найвищого елемента на лінії в рамці лінії. Так самовертикальне вирівнювання:The bottom вирівнює нижню частину елемента з нижньою частиною найнижчого елемента на лінії в рамці лінії.

Вирівняно по верху Вирівнювання по низу

4. Середнє вирівнювання:

конвертувати char в int java

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

Цей значок вертикально по центру

5. Вирівнювання тексту вгорі та внизу:

Вертикальне вирівнювання:Значення Text-top вирівнює верхню частину елемента з верхньою частиною шрифту батьківського елементавертикальне вирівнювання:Text-bottom вирівнює нижню частину елемента з нижньою частиною шрифту батьківського елемента.

Текст вирівняно по верхньому краю Текст вирівняно за нижнім краєм

6. Відсоткове вирівнювання:

Використання відсоткового значення з вертикальним вирівнюванням дозволяє вирівняти елемент по вертикалі за певним відсотком висоти лінії. Наприклад, vertical-align: 50% відцентрує елемент на половині висоти лінії.

По центру вертикально

недетерміновані кінцеві автомати

7. Вертикальне центрування елементів рівня блоку:

Щоб вертикально відцентрувати елемент на рівні блоку всередині його батьківського елемента, ви можете використовувати flexbox або макет сітки.

 Flexbox example: html Vertically Centered css .parent { display: flex; justify-content: center; align-items: center; height: 200px; /* Set the desired container height */ } 

8. Вертикальне центрування з невідомою висотою елемента:

Якщо ви не знаєте висоту елемента, який потрібно відцентрувати по вертикалі, ви можете використати комбінацію позиції та трансформації:

 html Vertically Centered (Unknown Height) CSS .parent { position: relative; height: 200px; /* Set the desired container height */ } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } 

9. Вертикальне центрування з багаторядковим текстом:

Щоб вертикально відцентрувати багаторядковий текст усередині контейнера, ви можете використовувати комбінацію flexbox і псевдоелемента:

 html Multi-line <br>Vertically Centered Text CSS .parent { display: flex; align-items: center; height: 200px; /* Set the desired container height */ } .child { flex: 1; text-align: center; } .child::before { content: &apos;&apos;; display: inline-block; vertical-align: middle; height: 100%; } 

10. Вертикальне центрування зображень у контейнері з різними пропорціями:

Якщо у вас є зображення з різними пропорціями, які ви хочете розташувати всередині контейнера, ви можете використовувати комбінацію flexbox і object-fit:

HTML:

 <img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css.webp" alt="Image 1"> <img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css.webp" alt="Image 2"> 

CSS:

 .parent { display: flex; align-items: center; justify-content: center; height: 200px; /* Set the desired container height */ } img { object-fit: contain; max-height: 100%; } 

11. Поєднання вертикального вирівнювання з висотою лінії:

Ви можете поєднати властивість vertical-align із властивістю line-height, щоб досягти більш точного вертикального вирівнювання, особливо з великими розмірами шрифту.

 .element { font-size: 24px; line-height: 1.5; vertical-align: middle; } 

12. Використання властивості дисплея для вирівнювання:

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

 .container { display: table-cell; vertical-align: middle; } 

13. Вертикальне вирівнювання в таблицях:

Властивість vertical-align часто використовується в клітинках таблиці (), щоб контролювати вирівнювання вмісту в клітинках.

pyspark sql

 td { vertical-align: middle; } 

14. Вирівнювання елементів вбудованого блоку:

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

 <span>&#x2B50;</span> Star Rating .icon { vertical-align: middle; font-size: 24px; } 

Це лише кілька прикладів обробки вертикального вирівнювання в різних сценаріях. Залежно від вашого конкретного макета та вимог, вам може знадобитися адаптувати або поєднати ці методи для досягнення бажаних результатів. CSS надає різні інструменти для ефективної обробки вертикального вирівнювання в різних контекстах.

Пам’ятайте, що хоча властивість vertical-align має застосування, існують більш комплексні рішення для всіх сценаріїв вирівнювання, особливо для елементів на рівні блоку. Для більш складних макетів і вимог до вирівнювання рекомендується досліджувати сучасні методи компонування CSS, такі як Flexbox, CSS Grid або навіть значення позиції CSS (наприклад, абсолютні та відносні), щоб досягти бажаних результатів більш ефективно та передбачувано.

Пам’ятайте, що «vertical-align» впливає лише на елементи вбудованого рівня або клітинки таблиці. Використовуйте такі методи, як flexbox, макет сітки або позиціонування, щоб вирівняти елементи на рівні блоку по вертикалі.

Ще кілька прикладів

 table, th, td{ border: 2px solid red; border-collapse: collapse; font-size: 20px; } #super{ vertical-align: super; } #sub{ vertical-align: sub; } <table class="table"> <td>baseline</td> <td>middle</td> <td>bottom</td> <td>top</td> <td>Hi, Welcome to the javaTpoint.com. This site is developed so that students may learn computer science related technologies easily. The javaTpoint.com is always providing an easy and in-depth tutorial on various technologies. </td> </table> <h2> Use of super and sub values </h2> <h3>Using super value: x<span id="super">2</span>+ y<span id="super">2</span> = r<span id="super">2</span></h3> <h3> Chemical formula of Water by using sub value: H<span id="sub">2</span>O</h3> 

Вихід

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

приклад

 div{ font-size: 20px; border: 2px solid red; } img{ width:150px; height: 100px; } img.top { vertical-align: text-top; } img.bottom { vertical-align: text-bottom; } img.middle { vertical-align: middle; } An <img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css-2.webp"> image with a default alignment. An <img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css-2.webp" alt> image with a text-bottom alignment. An <img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css-2.webp" alt> image with a middle alignment. An <img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css-2.webp" alt> image with a text-top alignment. 

Вихід

Переваги вертикального вирівнювання в CSS

Простий у використанні для вбудованих елементів:Властивість vertical-align є простою для вирівнювання елементів, таких як зображення, піктограми або текст, у межах рядка тексту чи інших елементів.Підтримка широкого браузера:Властивість vertical-align добре підтримується браузером і широко підтримується різними браузерами.Кілька варіантів вирівнювання:Він надає різні варіанти вирівнювання, як-от базова лінія, середина, верх, низ, текст угорі, текст унизу, нижній і верхній індекс, що дає розробникам гнучкість у вирівнюванні елементів відповідно до їхніх вимог.Чуйне вирівнювання:Його можна використовувати в адаптивному дизайні для адаптації вертикального вирівнювання на основі розміру контейнера або доступного простору.Простота вбудованих елементів:Для вирівнювання невеликих елементів, таких як піктограми чи зображення, у рядку тексту властивість vertical-align забезпечує відносно просте рішення, не вимагаючи складних методів компонування.Точне налаштування:Властивість дозволяє точно налаштувати вертикальне положення елементів, що може бути корисним для досягнення конкретних цілей дизайну.Узгодженість із клітинками таблиці:У контексті таблиць властивість vertical-align контролює вирівнювання вмісту в клітинках таблиці. Це може допомогти підтримувати узгодженість макетів на основі таблиць.Поєднання з текстом:Він ефективно вирівнює елементи з текстовим вмістом, наприклад вирівнює піктограми або вбудовані мітки з прилеглим текстом.Збереження пропорцій:Під час вирівнювання зображень або піктограм у межах рядка тексту вертикальне вирівнювання може допомогти зберегти співвідношення сторін цих елементів, особливо в поєднанні з відповідними розмірами шрифтів і висотою рядків.Швидке виправлення вирівнювання:Якщо вам потрібні швидкі виправлення проблем з вертикальним вирівнюванням, особливо в сценаріях зі змішаним вмістом, вертикальне вирівнювання може забезпечити швидке вирішення без необхідності значної реструктуризації макета.Стиль електронної пошти CSS:У електронних листах HTML, де потрібно краще підтримувати складні макети, використання вертикального вирівнювання може бути корисним для базового вертикального вирівнювання елементів, не покладаючись на зовнішні таблиці стилів або складні методи.Сумісний з дисплеєм:inline-block: властивість vertical-align сумісна з елементами inline-block, дозволяючи легко вирівнювати такі елементи по вертикалі в межах лінії.Підтримка узгодженості:Для елементів, які є частиною табличних даних або потребують вирівнювання з подібними елементами в різних рядках або стовпцях, вертикальне вирівнювання може допомогти зберегти візуальну узгодженість.Сумісність з браузером:На відміну від деяких нових методів CSS, вертикальне вирівнювання є частиною CSS протягом тривалого часу та має хорошу крос-браузерну сумісність.

Недоліки вертикального вирівнювання в CSS

Обмежено вбудованими елементами:Найбільш істотним обмеженням властивості vertical-align є те, що воно працює лише для елементів вбудованого рівня або комірок таблиці. Це не стосується безпосередньо елементів рівня блоку. Це може зробити вертикальне вирівнювання більш складним для великих елементів або складних макетів.Непослідовна поведінка:Вертикальне вирівнювання може бути складним і непослідовним, особливо з різними розмірами шрифтів, висотою рядків і вкладеними елементами. Те саме значення вертикального вирівнювання може давати різні результати залежно від контексту.Особливості веб-переглядача:Деякі старіші веб-переглядачі можуть мати непослідовні інтерпретації або особливості властивості vertical-align, що може призвести до неочікуваних результатів. Однак із розвитком сучасних браузерів ця проблема вирішилася.Обмежений контроль над інтервалами:Властивість vertical-align в першу чергу стосується вирівнювання елементів по вертикалі, але вона пропонує лише невеликий контроль над відстанню між елементами. Регулювання інтервалів часто вимагає додаткових змін CSS або HTML.Flexbox і Grid як альтернативи:Для більш складних вимог до компонування та вертикального вирівнювання елементів на рівні блоку розробники часто покладаються на Flexbox або CSS Grid, які забезпечують більш надійні та передбачувані рішення.Не підходить для повного центрування:Хоча вертикальне вирівнювання корисне для вертикального вирівнювання вбудованих елементів, воно підходить для повного центрування (горизонтально та вертикально) елементів на рівні блоку з додатковими методами CSS.Оманлива назва:Назва «vertical-align» може ввести в оману, оскільки вона не вирівнює елемент вертикально так, як це часто очікують розробники. Замість цього він контролює вирівнювання вмісту елемента в межах рядка.Складність із різними шрифтами:Поведінка вертикального вирівнювання може бути непередбачуваною при роботі з елементами різного розміру шрифту та висоти рядків. Це може ускладнити послідовне вертикальне вирівнювання.Обмежено для складних макетів:Це не підходить для складних макетів або сценаріїв, де потрібно вертикально вирівнювати більші елементи на рівні блоків у батьківському контейнері.Кросбраузерність:Хоча сучасні веб-переглядачі мають покращену підтримку вертикального вирівнювання, старіші веб-переглядачі все ще можуть демонструвати невідповідності або неочікувану поведінку.Альтернативні техніки:Сучасні методи компонування CSS, такі як Flexbox і CSS Grid, пропонують потужніші та передбачувані способи обробки складних вимог до компонування, включаючи вертикальне вирівнювання як вбудованих, так і блочних елементів.Особливості доступності:Використання вертикального вирівнювання для макета може бути не найдоступнішим підходом, оскільки це може заважати програмам зчитування з екрана та іншим допоміжним технологіям. Семантичний HTML і відповідні методи CSS часто є кращим вибором для доступності.Проблеми налагодження:Усунення несподіваної поведінки або проблем із вирівнюванням, пов’язаних із вертикальним вирівнюванням, іноді може бути складним, особливо під час роботи з вкладеними елементами та різними розмірами шрифту.Еволюція веб-верстки:У міру того як ландшафт веб-розробки розвивається, нові методи макета, такі як CSS Grid Layout і Flexbox, пропонують більш сучасні та комплексні рішення для проблем макета, що потенційно робить вертикальне вирівнювання менш актуальним для багатьох сценаріїв.

Загалом, незважаючи на те, що властивість vertical-align зручна для вирівнювання вбудованих елементів або комірок таблиці в межах рядка тексту, розробникам часто потрібні інші методи CSS для більш просунутих вимог до компонування та позиціонування, особливо коли вони мають справу з елементами на рівні блоку або складними макетами. CSS Flexbox і CSS Grid є потужними альтернативами для ширшого вирівнювання та керування позиціонуванням.

Висновок

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