|
Абсолютное центрирование с помощью CSS
|
|
| Kosten | Четверг, 30 Мая 2019, 03:25 | Сообщение 1 |
| Также в этом посте узнаете, как вы можете центрировать HTML-элемент по горизонтали и вертикали с помощью CSS. Если говорить про вертикальное центрирование, то здесь вертикального центрирования элемента контейнер элемента должен отображаться в виде ячейки таблицы. Контейнер также должен иметь высоту, чтобы браузер мог рассчитать центральную позицию.
А также свойство вертикального выравнивания должно быть установлено на середину.
Посмотреть
Для горизонтального центрирования элемента этот элемент должен отображаться как блочный элемент. Его ширина должна быть задана, а поля слева и справа должны быть рассчитаны автоматически. Контейнер должен быть элементом уровня блока или иметь некоторую заданную ширину.
Горизонтальное и вертикальное центрирование вместе
Посмотреть
Абсолютное центрирование по горизонтали и вертикали в CSS
HTML
Код <div class="sagtun maszabtun">
Здесь идет описание
</div>
CSS
Код .sagtun {
width: 185px;
height: 185px;
position: absolute;
margin: auto;
left: 0;
right: 0;
bottom: 0;
top: 0;
color: #f5eeee;
background: #292626;
}
.maszabtun {
text-align: center;
line-height: 185px;
box-shadow: 3px 2px 3px rgba(29, 28, 28, 0.59);
border-radius: 10px;
}
Демонстрация
| | Страна: (RU) |
| |
| Kosten | Пятница, 31 Мая 2019, 03:00 | Сообщение 2 |
|
| Центрирование div на странице
Значение auto в margin свойстве устанавливает левое и правое поля для доступного пространства на странице. Помните, что ваш центрированный div должен иметь width свойство.
Этот метод работает практически со всеми браузерами.
HTML
Код <div class="center-div"></div>
CSS
Код .center-div
{
margin: 0 auto;
width: 100px;
}
See the Pen
Центрирование div на странице by Kocsten (@kocsten)
on CodePen.
| | Страна: (RU) |
| |
| Kosten | Пятница, 31 Мая 2019, 03:03 | Сообщение 3 |
|
| Центрирование div внутри div - old-school
Автоматический трюк снова наносит удар, где внешний div может быть беспорядочным, но внутренний div должен иметь width свойство.
Этот метод работает практически со всеми браузерами.
HTML
Код <div class="outer-div"><div class="inner-div"></div></div>
CSS
Код .outer-div
{
padding: 30px;
}
.inner-div
{
margin: 0 auto;
width: 100px;
}
See the Pen
Центрирование div внутри div, old-school by Kocsten (@kocsten)
on CodePen.
| | Страна: (RU) |
| |
| Kosten | Пятница, 31 Мая 2019, 03:07 | Сообщение 4 |
|
| Центрирование div внутри div с помощью встроенного блока
Свойство text-align работает только на встроенных элементах. Значение inline-block отображает внутренний DIV в качестве встроенного элемента, а также блока, так что text-align свойство во внешнем DIV центров внутреннего DIV. С этим методом внутренний div не требует установленной ширины, где работает со всеми браузерами.
HTML
Код <div class="outer-div"><div class="inner-div"></div></div>
CSS
Код .outer-div
{
padding: 30px;
text-align: center;
}
.inner-div
{
display: inline-block;
padding: 50px;
}
See the Pen
Центрирование div внутри div с помощью встроенного блока by Kocsten (@kocsten)
on CodePen.
| | Страна: (RU) |
| |
| Kosten | Пятница, 31 Мая 2019, 03:10 | Сообщение 5 |
|
| Центрирование div внутри div по горизонтали и вертикали
При этом используется автоматический трюк на полях для центрирования div как по горизонтали, так и по вертикали. Работает с каждым браузером. Внутренний div должен иметь свойство width и height. Это не работает, если внешний div имеет фиксированную высоту.
HTML
Код <div class="outer-div"><div class="inner-div"></div></div>
CSS
Код .outer-div
{
padding: 30px;
}
.inner-div
{
margin: auto;
width: 100px;
height: 100px;
}
See the Pen
Центрирование div внутри div, по горизонтали и вертикали by Kocsten (@kocsten)
on CodePen.
| | Страна: (RU) |
| |
| Kosten | Пятница, 31 Мая 2019, 03:13 | Сообщение 6 |
|
| Вертикальный центр в делении с преобразованием
Используется transform для центрирования любого контента в div по вертикали. В этом случае этот метод использует пустой HTML- элемент в качестве контейнера p, где можете много обернуть в пустой элемент. Значение perspective уменьшает размывание на дисплеях с высоким разрешением, где вы можете поддерживать старые версии браузеров, используя префиксы поставщиков для transform, такие как -webkit-transformи -ms-transform.
HTML
Код <div class="center-div"><p>Эссе Ауге Долор</p></div>
CSS
Код .center-div p
{
position: relative;
top: 50%;
transform: perspective(1px) translateY(-50%);
}
See the Pen
Вертикальный центр в делении с преобразованием by Kocsten (@kocsten)
on CodePen.
| | Страна: (RU) |
| |
| Kosten | Пятница, 31 Мая 2019, 03:16 | Сообщение 7 |
|
| Центрирование div в нижней части страницы
Это использует маржу auto и абсолютный позиционный внешний div, где работает со всеми браузерами. Внутренний div должен иметь width свойство. Пробел в нижней части страницы задается в bottom свойстве внешнего div. Вы также можете центрировать div в верхней части страницы, заменяя bottom свойство на top.
HTML
Код <div class="outer-div"><div class="inner-div"></div></div>
CSS
Код .outer-div
{
position: absolute;
bottom: 30px;
width: 100%;
}
.inner-div
{
margin: 0 auto;
width: 100px;
height: 100px;
background-color: #ccc;
}
See the Pen
Центрирование div в нижней части страницы by Kocsten (@kocsten)
on CodePen.
| | Страна: (RU) |
| |
| Kosten | Пятница, 31 Мая 2019, 03:20 | Сообщение 8 |
|
| Центрирование div на странице, отзывчивый
Ширина div является отзывчивой, так как она соответствует размеру области просмотра. Он работает практически со всеми браузерами. Ваш центрированный div должен иметь max-width свойство.
HTML
Код <div class="center-div"></div>
CSS
Код .center-div
{
margin: 0 auto;
max-width: 700px;
}
See the Pen
Центрирование div на странице, отзывчивый by Kocsten (@kocsten)
on CodePen.
| | Страна: (RU) |
| |
| Kosten | Пятница, 31 Мая 2019, 03:25 | Сообщение 9 |
|
| Просто inline-block элементов в центрированном контейнере, где также использует медиа-запросы CSS. Когда размер экрана меньше 600 пикселей, max-width свойство левого и правого делителей устанавливается на 100%.
Центрирование двух отзывчивых делителей рядом
HTML
Код <div class="container"><div class="left-div"></div><div class="right-div"></div></div>
CSS
Код .container
{
text-align: center;
}
.left-div
{
display: inline-block;
max-width: 300px;
vertical-align: top;
}
.right-div
{
display: inline-block;
max-width: 150px;
}
@media screen and (max-width: 600px)
{
.left-div, .right-div
{
max-width: 100%;
}
}
See the Pen
Центрирование двух отзывчивых делителей рядом by Kocsten (@kocsten)
on CodePen.
| | Страна: (RU) |
| |
| Kosten | Пятница, 31 Мая 2019, 03:27 | Сообщение 10 |
|
| Это центрирует div как по горизонтали, так и по вертикали, используя CSS3 Flexbox. Свойство height в контейнере может быть что угодно, пока это больше чем центрированные дела. В этом примере мы используем vhвысоту окна браузера, область просмотра, а не высоту страницы. Для получения дополнительной информации о значениях области просмотра и их использовании см.
Flexbox div по центру
See the Pen
Flexbox, div по центру by Kocsten (@kocsten)
on CodePen.
| | Страна: (RU) |
| |
| Kosten | Пятница, 31 Мая 2019, 03:31 | Сообщение 11 |
|
| Этот метод использует display свойство со table значением, заставляя его вести себя как table элемент, центрируя div как по горизонтали, так и по вертикали. Центрированный div может иметь динамическое содержимое, то есть любую высоту или ширину, где может быть отзывчивым.
Центрирование динамического div по горизонтали и вертикали
HTML
Код <div class="outer-div"><div class="mid-div"><div class="center-div"></div></div></div>
CSS
Код .outer-div
{
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.mid-div
{
display: table-cell;
vertical-align: middle;
}
.center-div
{
margin: 0 auto;
width: 300px;
height: 100px;
}
See the Pen
Центрирование динамического div, по горизонтали и вертикали by Kocsten (@kocsten)
on CodePen.
Свойства width и height в центрированной DIV может быть что угодно.
| | Страна: (RU) |
| |
