Центрирование в CSS

Центрирование в CSS

От автора: данная статья предлагает руководство ко всему, что вам нужно знать о центрировании в CSS.

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

1. Встроенные элементы

text-align

Для центрирования встроенного элемента, такого как ссылка, span или изображение, все, что вам нужно, это text-align: center.

Центрирование в CSS

Для нескольких встроенных элементов процесс аналогичен. Это возможно при использовании text-align: center.

Центрирование в CSS

Flexbox

Изменив display на flex гибкий, мы можем легко центрировать содержимое.

Центрирование в CSS

Даже для нескольких встроенных элементов центрирование работает без проблем.

Центрирование в CSS

CSS-сетка

С помощью сеточного контейнера тарелка будет центрирована в соответствии с ее областью сетки. Обратите внимание, что это не будет работать с более чем одной тарелкой, если они не будут обернуты в один элемент.

Центрирование в CSS

2. Блочные элементы

Auto Margin

Элемент блока с известной шириной и высотой можно центрировать, используя значение auto для левого и правого полей.

Центрирование в CSS

Auto Margin

Для нескольких блочных элементов их нужно заключить в элемент, который нужно центрироваться.

Центрирование в CSS

Flexbox

Вы можете использовать flexbox для центрирования тарелки.

Центрирование в CSS

Также не нужно оборачивать тарелки в контейнер, чтобы выровнять их по центру. Flexbox может это сделать!

Центрирование в CSS

CSS позиционирование

Абсолютно позиционируя тарелку, мы можем легко центрировать ее по горизонтали с помощью преобразований CSS.

Центрирование в CSS

Если ширина элемента известна, вы можете использовать вместо преобразований CSS отрицательное поле.

Центрирование в CSS

Вертикальное выравнивание

1. Встроенные элементы

Вертикальный отступ

Один из самых простых способов центрировать элемент по вертикали — использовать отступы.

Центрирование в CSS

Вертикальное выравнивание

Свойство vertical-align можно использовать для одного или нескольких элементов. В этом примере вилка и нож должны быть отцентрованы вертикально относительно тарелки.

Центрирование в CSS

Flexbox

Чтобы выровнять тарелку, вилку и нож, мы можем использовать flexbox.

Центрирование в CSS

2. Блочные элементы

Абсолютное позиционирование

Абсолютно позиционируя элемент, можно центрировать его по вертикали с помощью преобразований CSS.

Центрирование в CSS

Если высота элемента известна, вы можете использовать отрицательное поле вместо позиционирования.

Центрирование в CSS

CSS-сетка

С помощью CSS-сетки мы можем использовать align-items, чтобы центрировать элемент по вертикали относительно его области сетки.

Центрирование в CSS

Горизонтальное и вертикальное центрирование

1. Встроенные элементы

Отступы и выравнивание текста

Мы можем комбинировать padding и text-align, чтобы центрировать элемент по горизонтали и вертикали.

Центрирование в CSS

2. Другие типы элементов

Абсолютное позиционирование

Абсолютно расположим тарелку слева и справа.

Центрирование в CSS

Flexbox

Установив для justify-content и align-items — center, это легко и просто.

Центрирование в CSS

CSS-сетка

С помощью свойства place-items.

Центрирование в CSS

Автор: Ahmad Shadeed

Источник: ishadeed.com

Редакция: Команда webformyself.

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии запрещены.