Коли ми створюємо веб-сторінку, нерідко виникає необхідність вирівняти текст по вертикалі внизу блоку. Це може бути корисно, наприклад, коли в нас є контейнер із фіксованою висотою і ми хочемо, щоб текст усередині блоку завжди був розташований внизу, навіть якщо його вміст невеликий.
Існує кілька способів досягти цього результату. Один із найпростіших способів – використання CSS властивості “display: flex” для контейнера і “align-self: flex-end” для тексту всередині блоку. Це дає змогу вирівняти текст по вертикалі внизу блоку без необхідності використовувати додаткові стилі.
Якщо ж ви віддаєте перевагу використанню тільки HTML-тегів, то можна скористатися тегом <p> для створення нового абзацу і додати йому клас або атрибут “align” зі значенням “bottom”. Це дасть змогу вирівняти текст внизу блоку без необхідності використовувати CSS стилі.
| Заголовок | Опис |
|---|---|
| 1. Метод absolute | Встановлює позицію елемента відносно найближчого позиціонованого предка |
| 2. Метод fixed | Встановлює позицію елемента відносно вікна перегляду |
| 3. метод sticky | Встановлює позицію елемента відносно найближчого прокручуваного контейнера або вікна перегляду |
| 4. Метод relative | Встановлює позицію елемента щодо його нормального положення |
| 5. Метод flexbox | Дозволяє гнучко розподіляти елементи в контейнері та керувати їхніми розмірами й порядком |
| 6. Метод grid | Дозволяє створювати сітку з гнучко настроюваних комірок |
| 7. Метод float | Дозволяє елементам “плавати” навколо інших елементів |
| 8. Метод line-height | Встановлює висоту рядка тексту всередині елемента |
| 9. Метод vertical-align | Вирівнює елементи по вертикалі всередині рядка таблиці або іншого блочного елемента |
| 10. Метод display: table-cell | Дозволяє елементам поводитися як комірки таблиці |
Як опустити текст у CSS?
Для зміщення слів у тексті, можна використовувати CSS властивість vertical-align . Як значення, ця властивість може приймати не тільки значення у вигляді слів, а й пікселі, відсотки та інші доступні одиниці.
Як зрушити текст усередині блоку CSS?
Для цього використовується властивість text-align . Текст можна вирівняти по лівому краю (значення left ), по правому (значення right ), по центру (значення center ) і одночасно по обох краях (значення justify ).
Як позиціонувати текст у CSS?
CSS дає змогу вирівняти текст , використовуючи властивість text-align з 4 основними значеннями:
- left – по лівому краю. Використовується за замовчуванням
- center – по центру
- right – по правому краю
- justify – по ширині
