CSS text-align вирівнювання тексту по горизонталі
У таких програмах, як, наприклад, Microsoft Word, ви напевно зустрічали інструменти вирівнювання тексту по горизонталі. Вирівняти текст можна по лівому або правому краю, по центру або по ширині. Те саме є і в CSS – вирівнювання тексту здійснюється за допомогою властивості text-align та відповідних значень, які показані в таблиці:
Як потрібно вирівняти текст? Відповідне значення
| Ліворуч | left |
| Праворуч | right |
| По центру сторінки/блоку | center |
| По ширині сторінки/блоку | justify |
| Вирівнювання тексту по тому краю, з якого він починається (тобто текст, що йде ліворуч, вирівнюється по лівому краю) | start |
| Вирівнювання тексту по протилежному краю (тобто текст, що йде зліва направо, вирівнюється праворуч) | end |
Приклад запису стилю:
Рекомендації щодо використання стилів
На скріншотах показано приклади використання різних значень для властивості CSS text-align:
Скриншот 1: вирівнювання LTR-тексту по лівому краю за допомогою start. Аналогічного виду можна досягти за допомогою значення left.
Скриншот 2: вирівнювання LTR-тексту з правого краю за допомогою значення end. Аналогічного виду можна досягти за допомогою right.
Скриншот 3: вирівнювання тексту за шириною. При дрібному шрифті та великій ширині сторінки/блоку такий варіант вирівнювання тексту на веб-сторінці виглядає прийнятно.
Скріншот 4: збільшено розмір шрифту та зменшено ширину блоку порівняно з попереднім прикладом. Як бачимо, з'явилися негарні проміжки в тексті (підкреслені червоною лінією).
Скріншот 5: два способи вирівнювання тексту на прикладі mobile-версії нашого підручника (ліворуч – text-align: left, праворуч – text-align: justify). Спробуйте прочитати текст в обох колонках і визначити, який варіант є більш комфортним для читання.
