Css центрирование. Просто выравниваем блоки.

Илья Ландар

Сайты, трафик, маркетинг

Css центрирование. Просто выравниваем блоки.

Автор

Илья Ландар

На чтение

< 1

Просмотров

18 просмотров

Опубликовано

22.05.2020
Время на прочтение: < 1 минуты

В верстке часто возникает вопрос центрирования. Расскажу в этой статье как я выравниваю блоки по центру.

Флексы

С помощью флексов можно легко центрировать дочерние элементы.

Дочерним называется элемент, который непосредственно располагается внутри родительского элемента. Чтобы лучше понять отношения между элементами документа, разберём небольшой код

CSS:
display: flex // отображаем блок как флекс
justify-content: center // выравниваем по горизонтали
align-items: center // выравниваем по вертикали

Про флексы можно почитать тут

Margin + absolute

CSS:
margin: auto   
position: absolute  
top: 0  
left: 0  
right: 0  
bottom: 0

See the Pen Margin + absolute by Illlya (@Ineye) on CodePen.

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

position: absolute
top: 50% // отступ от верхнего края на 50% от ширины элемента
left: 50% // отступ от левого края на 50% от ширины элемента
transform: translate(-50%, -50%) // отнимаем половины ширины и высоты элемента.

See the Pen Absolute center by Illlya (@Ineye) on CodePen.

Центрирование текста по горизонтали:

text-align: center

Центрирование блока по горизонтали:

margin: auto

Так же про центрирование можно посмотреть тут

Илья Ландар

Веб специалист
Здравствуйте. Я веб разраотчик, в свободное время пишу статьи. Если есть вопросы по созданию сайта можете написать мне

Вам так же может понравиться

< 1 мин

3 просмотров

Уменьшаем вес картинок для оптимизации сайта

Время на прочтение: < 1 минуты Для начала нам нужно понять зачем нам уменьшать вес картинок. Связь такая. Меньше вес

< 1 мин

3 просмотров

Wow js анимация при появлении.

Время на прочтение: < 1 минуты Что бы сделать анимацию при появлении нам нужно. Github — для скачивания архив wowjs

2 мин

9 просмотров

Просто о сео. Тех часть.

Время на прочтение: 2 минут(ы) При знакомстве с сео, сразу осознаешь что это целая наука которая полностью не изучена

< 1 мин

18 просмотров

Css центрирование. Просто выравниваем блоки.

Время на прочтение: < 1 минуты В верстке часто возникает вопрос центрирования. Расскажу в этой статье как я выравниваю блоки