Вчора, на роботі, я намагався вирівняти блоковий елемент по правому краю. Таке завдання зустрічається не часто, але навіть коли вона зустрічається, я використовую inline-block або float, але можна обійтися без них.

Спосіб, про який я розповім, вам ймовірно знаком. Одним з перших у верстальників постає питання про вирівнювання елементів. Часто це центрування блокових елементів через margin. Але я ніколи не бачив, щоб хтось використовував margin для вирівнювання по правому краю. Думаю це через непорозуміння механізму роботи цієї властивості зі значенням auto. Через нього можна і по вертикалі центрировать, але це тема окремої статті.

демонстрація з трьома вирівнювання через margin.

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

Auto в даному випадку говорить нам, що відстань зліва і справа блоку, розрахується браузером пропорційно, m грунтуючись на розмірі елемента й того, хто місцем. Так якщо елемент займає 50% по ширині, збоку стануть однаковими, по 25%.

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

Не забудьте, що елемент повинен бути менше ніж у батька і бути блоковим.

⌘ ⌘ ⌘