Коли ми створюємо веб-сторінку, часто виникає необхідність вирівняти текст по вертикалі внизу блоку. Це може бути корисним, наприклад, коли у нас є контейнер з фіксованою висотою і ми хочемо, щоб текст усередині блоку завжди був розташований внизу, навіть якщо його вміст невеликий.
Існує кілька способів досягти цього результату. Один із найпростіших способів – використання 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 властивість vertical-align. Як значення, ця властивість може набувати не тільки значення у вигляді слів, а й пікселі, відсотки та інші доступні одиниці.
Для цього використовується властивість text-align . Текст можна вирівняти по лівому краю (значення left), по правому (значення right), по центру (значення center) і одночасно по обох краях (значення justify).
CSS дозволяє вирівняти текст, використовуючи властивість text-align з 4 основними значеннями: