/ 

CSS. Выравнивание блочного элемента по правому краю.

Горизонтальное выравнивание в CSS
Горизонтальное выравнивание в CSS

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

Способ, о котором я расскажу, вам вероятно знаком. Одним из первых у верстальщиков встает вопрос о выравнивании элементов. Часто это центрирование блочных элементов через margin. Но я никогда не видел, чтобы кто-то использовал margin для выравнивания по правому краю. Думаю это из-за недопонимания механизма работы этого свойства со значением auto. Через него можно и по вертикали центрировать, но это тема отдельной статьи.

Демонстрация с тремя выравниваниями через margin.

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

.center {
    margin: 0 auto;

    /* или */
    margin-left: auto;
    margin-right: auto;
}

Auto в данном случае говорит нам, что расстояние слева и справа блока, рассчитается браузером пропорционально,m основываясь на размере элемента и оставшимся местом. Так если элемент занимает 50% по ширине, боковые отступы станут одинаковыми, по 25%.

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

.right {
    margin: 0 0 0 auto;

    /* или */
    margin-left: auto;
}

Не забудьте, что элемент должен быть меньше чем у родителя и быть блочным.

⌘ ⌘ ⌘
Поделиться
Отправить
Адекватное подчеркивание ссылок
Фронтенд

Адекватное подчеркивание ссылок

Как исправить поведение text-decoration: underline

За и против. Оформление незагруженных изображений.
Фронтенд

За и против. Оформление незагруженных изображений.

Незагруженные изображение — не та проблема, которую нужно срочно решать. С изображениями есть другая, более важная, проблема.

Управляем поведением font-face в CSS
Фронтенд

Управляем поведением font-face в CSS

Поведением текста, отображаемого во время загрузки font-face, можно управлять с помощью свойства font-display. Как работает и какие значения поддерживет свойсто font-display читайте в статье.

Старт курса по архитектуре JavaScript приложений в SmartJS академии
Фронтенд

Старт курса по архитектуре JavaScript приложений в SmartJS академии

Краткое содержание вводной лекции курса по архитектуре современных JavaScript приложений в SmartJS академии