Урок 153 із 239
64%
← Назад

Центрування рядкових елементів у CSS

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

Центрування рядкових елементів у CSS

Рядкові елементи не можна центрувати за допомогою margin: auto, оскільки вони не мають власної ширини.

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

<div class="parent">
  <span class="child">text</span>
</div>
.parent {
  text-align: center;
  padding: 10px 0;
  border: 1px solid red;
}

.child {
  border: 1px solid green;
}
❗ Важливо:

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

  • text-align: center — вирівнює рядкові елементи по центру.
  • text-align: left — вирівнювання ліворуч (значення за замовчуванням).
  • text-align: right — вирівнювання праворуч.
  • Властивість працює для тексту та рядкових елементів.
📌 Завдання:
  1. №1. Створіть div з елементом span всередині.
  2. №2. Додайте границю для обох елементів.
  3. №3. Вирівняйте span по центру через text-align.
  4. №4. Спробуйте значення left і right.
💡 Показати підказку

text-align задається батьківському елементу, а не самому рядковому елементу.

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