В статье рассмотрим различные методы при выравнивании содержимого по центру div элементов в горизонтальном и вертикальном виде при помощи CSS. Когда-то на протяжении всей нашей карьеры в области кодирования мы все испытывали разочарование по поводу центрирования вещей в CSS, где просматривая, как центрировать div элементы.
Основная цель этого мануала заключается, это показать, как правильно при помощи нескольких хитростей CSS любой div модно корректно центровать по горизонтали, так и вертикальном положение, а также внутри страницы, выстроить div любого элемента.
Это может быть одной из самых простых задач, но она может быстро запутаться, когда вы добавите больше элементов и стилей на свою страницу. Поскольку это довольно распространенная проблема, вот список способов центрирования в CSS.
Основное центрирование div на странице:
Этот метод работает практически со всеми браузерами.
HTML
Код
<div class="nucleus"></div>
CSS
Код
.nucleus {
margin: 0 auto;
width: 85px;
height: 85px;
background-color: #225673;
border-radius: 50px;
}
Значение auto в margin свойстве устанавливает левое и правое поля для доступного пространства на странице. Помните, что ваш центрированный div должен иметь width свойство.
Демонстрация
Центрирование div внутри div:
Этот метод работает практически со всеми браузерами.
HTML
Код
<div class="ganglion-div"><div class="nucleus-div"></div></div>
CSS
Код
.ganglion-div {
padding: 20px;
background-color: #d2d2d2;
}
.nucleus-div {
margin: 0 auto;
width: 100px;
height: 100px;
background-color: #4a4d75;
border-radius: 61px;
}
Внешний div может быть беспорядочным, но внутренний div должен иметь width свойство.
Демонстрация
Центрирование div внутри div с помощью встроенного блока:
С этим методом внутренний div не требует установленной ширины, где аналогично работает со всеми браузерами.
HTML
Код
<div class="kernel-div"><div class="osnovna-div"></div></div>
CSS
Код
.kernel-div {
padding: 26px;
text-align: center;
background-color: #dcdcdc;
}
.osnovna-div {
display: inline-block;
padding: 48px;
background-color: #3a4d67;
border-radius: 100px;
}
Свойство text-align работает только на встроенных элементах. Значение inline-block отображает внутренний DIV в качестве встроенного элемента, а также блока, так что text-align свойство во внешнем DIV центров внутреннего DIV.
Демонстрация
Когда у нас есть некоторый текст и другие встроенные элементы на странице, каждая строка содержимого обрабатывается как строковое поле. Свойство text-align будет выравнивать этот контент на странице, например, если вы хотите, чтобы ваш текст был центрирован или выровнен.
Однако иногда вам может потребоваться выровнять элементы внутри этого линейного блока относительно других элементов, например, если у вас есть значок, отображаемый рядом с текстом, или текст разных размеров.
Существует множество способов сделать это, в зависимости от множества факторов, где на форуме представлены все методы по центрированию DIV-элемента.
Вертикальный центр в делении с преобразованием:
See the Pen
Вертикальный центр в делении с преобразованием by Kocsten (@kocsten)
on CodePen.
Центрирование div в нижней части страницы:
See the Pen
Центрирование div в нижней части страницы by Kocsten (@kocsten)
on CodePen.
Центрирование div на странице по горизонтальной и вертикальной:
Это снова использует margin auto и абсолютный позиционный элемент div. Работает со всеми браузерами.
See the Pen
Центрирование div на странице, по горизонтали и вертикали by Kocsten (@kocsten)
on CodePen.
Центрирование div на странице в адаптивном виде:
Ширина div является отзывчивой, так как она соответствует размеру области просмотра. Он работает практически со всеми браузерами.
See the Pen
Центрирование div на странице, отзывчивый by Kocsten (@kocsten)
on CodePen.
Центрирование div внутри div, внутренний div в адаптивном виде:
Ваш центрированный div должен иметь max-width свойство.
See the Pen
Центрирование div внутри div, внутренний div, отзывчивый by Kocsten (@kocsten)
on CodePen.
Центрирование двух отзывчивых делителей рядом:
Просто пара inline-block элементов в центрированном контейнере, где также использует медиа-запросы CSS. Когда размер экрана меньше 600 пикселей, max-width свойство левого и правого делителей устанавливается на 100%.
See the Pen
Центрирование двух отзывчивых делителей рядом by Kocsten (@kocsten)
on CodePen.
Flexbox: центр по горизонтали:
See the Pen
Flexbox, div по центру by Kocsten (@kocsten)
on CodePen.
Центрирование динамического div по горизонтали и вертикали:
Этот метод использует display свойство со table значением, заставляя его вести себя как table элемент, где центрируя div как по горизонтали, так и по вертикали. Центрированный div может иметь динамическое содержимое, то есть любую высоту или ширину.
See the Pen
Центрирование динамического div по горизонтали и вертикали by Kocsten (@kocsten)
on CodePen.
У каждой техники есть свои преимущества, это какой из них вы выбираете, в основном сводится к тому, какие браузеры вы поддерживаете и как выглядит ваша существующая разметка, но используйте таблицу сравнения, чтобы сделать правильный выбор в соответствии с нужными вам функциями.
