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

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

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

Рядково-блочні елементи поєднують властивості рядкових і блочних елементів.

Вони можуть розташовуватися в одному рядку, як рядкові елементи, і при цьому підтримують width, height, padding та margin.

Для центрування рядково-блочних елементів використовується text-align: center у батьківського елемента.

<div class="parent">
  <span class="child">text</span>
  <span class="child">text</span>
  <span class="child">text</span>
</div>

.parent {
  text-align: center;
  padding: 10px 0;
  border: 1px solid red;
}

.child {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid green;
}

❗ Важливо:

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

display: inline-block дозволяє задавати розміри елементу.
text-align: center центрує рядково-блочні елементи всередині батька.
margin між inline-block елементами можна задавати для створення відступів.

Практичне завдання

📌 Завдання:

№1. Дані div-елементи всередині батьківського блока:
<div class="child">text 1</div>
<div class="child">text 2</div>
<div class="child">text 3</div>
Перетворіть дочірні div у рядково-блочні елементи.
Додайте їм горизонтальний margin 5px.
Відцентруйте їх по горизонталі відносно батьківського елемента.

<div class="parent">
  <div class="child">text 1</div>
  <div class="child">text 2</div>
  <div class="child">text 3</div>
</div>

.parent {
  padding: 10px 0;
  border: 1px solid red;
}

.child {
  padding: 10px;
  border: 1px solid green;
}

💡 Показати підказку

Додайте дочірнім елементам display: inline-block і margin: 0 5px. Для батьківського елемента використайте text-align: center.

✅ Показати відповідь

.parent {
  padding: 10px 0;
  border: 1px solid red;
  text-align: center;
}

.child {
  display: inline-block;
  padding: 10px;
  margin: 0 5px;
  border: 1px solid green;
}