При створенні веб-сторінок іноді потрібно вирівняти текст по вертикалі. Це може знадобитися, наприклад, при вертикальному центруванні тексту всередині блоку або при вирівнюванні заголовка посередині сторінки. На щастя, за допомогою CSS можна досягти цього ефекту без особливих труднощів.
Одним із способів вирівнювання тексту центром по вертикалі є використання властивості line-height. У цьому випадку значення властивості повинно дорівнювати висоті блоку, всередині якого знаходиться текст. Це дозволить створити рівномірний відступ зверху та знизу тексту, що призведе до його вертикального центрування.
Ще одним способом вертикального центрування тексту є використання властивості display зі значенням flex. При цьому блок, що містить текст, стає блоковою флекс-контейнером, а сам текст вирівнюється по центру по вертикалі за допомогою властивості align-items.
| Заголовок 1 | Заголовок 2 | Заголовок 3 | Заголовок 4 |
|---|---|---|---|
| Опис 1 | Опис 2 | Опис 3 | Опис 4 |
| Як зробити текст центром по вертикалі CSS | Центрування тексту по вертикалі за допомогою CSS | Методи центрування тексту по вертикалі у CSS | Посібник із центрування тексту по вертикалі CSS |
| Створіть div-контейнер | Встановіть висоту та ширину для div-контейнера | Використовуйте властивість display: flex | Встановіть властивість align-items: center |
| Вставте текст усередину div-контейнера | Встановіть властивість justify-content: center | Встановіть властивість: text-align: center | Оновіть сторінку, щоб побачити централізований текст по вертикалі |
Як розмістити текст у центрі CSS?
Метод line-height Цей метод працює, коли ви хочете центрувати вертикально один рядок тексту. Все, що потрібно зробити – це задати висоту рядка більше, ніж розмір шрифту. За умовчанням вільний простір буде рівномірно розподілений зверху і знизу тексту. І рядок буде відцентрований вертикально.
Як зробити елемент центру по вертикалі CSS?
Висота контенту всередині кнопки дорівнює висоті рядка і становить 20px. Щоб текст кнопки став центром, необхідно розподілити за властивостями padding-top і padding-bottom простір, що залишився наступним чином: (50px – 20px) / 2.
Як змінити розташування тексту в CSS?
CSS дозволяє вирівняти текст, використовуючи властивість text-align з 4 основними значеннями:
- left – по лівому краю. Використовується за умовчанням
- center – по центру
- right – по правому краю
- justify – по ширині