Урок 29 із 239
12%
← Назад

Вирівнювання тексту в CSS

Навчіться вирівнювати текст на сторінці за допомогою властивості text-align.

Вирівнювання тексту в CSS

За допомогою CSS можна змінювати положення тексту всередині елемента. Для цього використовується властивість text-align.

Властивість text-align дозволяє вирівняти текст по лівому краю, правому краю, центру або одночасно по двох краях.

p {
  text-align: center;
}

Значення властивості text-align

ЗначенняОпис
leftВирівнювання тексту по лівому краю
rightВирівнювання тексту по правому краю
centerТекст розташовується по центру
justifyТекст вирівнюється одночасно по лівому і правому краях

Приклади використання

h1 {
  text-align: center;
}

p {
  text-align: justify;
}

.menu {
  text-align: right;
}
  • left — стандартне вирівнювання тексту.
  • center часто використовується для заголовків.
  • justify зручно використовувати для великих текстових блоків.
  • right використовується рідше, наприклад для спеціального оформлення.
❗ Важливо:

Властивість text-align впливає на текст всередині елемента, але не переміщує сам HTML-елемент.

📌 Завдання:
  1. Створіть заголовок h1 та вирівняйте його по центру.
  2. Створіть декілька абзаців та перевірте різні значення text-align.
  3. Спробуйте значення left, right, center та justify.
💡 Показати підказку

Для вирівнювання тексту використовуйте CSS-властивість text-align.

✅ Показати відповідь
h1 {
  text-align: center;
}

p {
  text-align: justify;
}