CSS від А до Я: як центрувати елементи за допомогою властивостей float і clear

9

Від автора: вітаю вас в нашій серії уроків CSS від А до Я! В цій серії я розповім вам про CSS значення і властивості, які починаються з різних букв алфавіту. Іноді навчального ролика буває недостатньо, і в цій статті я дам вам кілька швидких рад по роботі з властивостями float і clear.

F означає float і clear

Обтікання відмінно підходять для вирівнювання елементу по лівому або правому краю сторінки. Однак ви не можете за допомогою float: center центрувати елемент. Несправедливо, правда? Не бійтеся, сьогодні я розповім вам всі таємниці за центрування елементів.

Порада 1

Якщо елемент блочний, можна поєднувати властивості width і margin: auto. Властивість margin: auto автоматично вирахує рівні зовнішні відступи по лівому і правому краю, тим самим центрируя блок усередині свого контейнера.

Порада 2

Якщо елемент рядковий (або inline-block), застосовуйте до батьківського контейнера властивість text-align: center.

Порада 3

Якщо елемент має абсолютне позиціонування, то для горизонтального центрування використовуйте властивості left і transform разом.

Схожим чином можна зробити вертикальне центрування, але більш детально про це у наступних радах!

Порада 4

Використовуйте Flexbox (ще одна властивість на літеру F!). Щоб центрувати один елемент за допомогою flexbox, вам знадобиться прописати дві властивості на контейнері: display: flex і justify-content: center.

Flexbox дозволяє творити багато чого цікавого. Зокрема, з його допомогою можна розтягувати і стискати контейнери для більш раціонального використання простору. З його допомогою можна навіть вирівняти елемент по горизонталі і вертикалі, чого не можна зробити при роботі з блоковими або малими елементами. Їх можна вирівнювати або по горизонталі, або по вертикалі.

Flexbox зручний ще і тим, що з ним більше не виникає проблем зі спаданням контейнерів, тобто більше не потрібно використовувати clearfix.