Урок 150 із 239
63%
← Назад

Вирівнювання блочних елементів у CSS

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

Вирівнювання блочних елементів у CSS

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

Щоб розмістити блочний елемент по центру горизонтально, потрібно задати лівий і правий відступи значенням auto.

<div class="parent">
  <div class="child"></div>
</div>
.parent {
  border: 1px solid red;
}

.child {
  height: 100px;
  width: 200px;
  border: 1px solid green;
  margin: 10px auto;
}
❗ Важливо:

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

  • margin: 10px auto — верхній і нижній відступ 10px, лівий і правий автоматичні.
  • auto розподіляє вільний простір порівну між лівою і правою сторонами.
  • Для центрування елемент повинен мати задану ширину.

Різні верхній і нижній відступи

Якщо потрібно задати різні верхній і нижній відступи, можна використовувати чотири значення margin.

.child {
  margin: 30px auto 10px auto;
}

Також можна скоротити запис до трьох значень.

.child {
  margin: 30px auto 10px;
}
📌 Завдання:
  1. №1. Створіть батьківський блок і внутрішній блок.
  2. №2. Задайте внутрішньому блоку ширину.
  3. №3. Вирівняйте його по центру за допомогою margin: auto.
  4. №4. Змініть верхній і нижній відступи.
💡 Показати підказку

Якщо margin: auto не працює, перевірте, чи має елемент задану ширину і чи є він блочним.

✅ Показати відповідь
.child {
  width: 200px;
  margin: 10px auto;
}