|
Центрирование div неизвестной высоты и ширины
|
|
| Kosten | Среда, 29 Августа 2018 | Сообщение 1 |
| Думаю многие, когда создавали страницу на сайте, то наверняка вы сталкивались с некой ситуацией, чтоб корректно разместить элемент по центру. По этой ситуации есть очень много вариантов, что здесь рассмотрим как по мне самую актуальную, это при помощи стилей CSS. Давайте подробно разберем центрованное по горизонтали и вертикале в div элементе. Который будет корректно отображать на всех современных браузерах.
Стилистика CSS3 добавляет новые единицы, как vh и vw, что относятся к экрану, а точнее к его высоте и также ширине, что значительно упрощает размер элементов по отношению к размеру монитора или мобильного экрана, поскольку вам больше не нужно заставить каждого родителя в дереве передавать высоту окна просмотра.
HTML
Код <div class="objectas-centering">Центрирование div</div>
CSS
Код .objectas-centering {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
Второй вариант, что тоже считается простым и надежным
Код .objectas-centering{
margin:0 auto;
width:150px;
height:150px;
}
Чтоб выставить центрирования в горизонтальном виде, то здесь нужно выставить ширину, где будет значение auto отвечать отступы по обеим сторонам левого и правого отступа, где используем стили. Такой метод отлично работает с блочными элементами, как div, p, h1, прочее.
Следующий вариант по выравнивание по горизонтали и вертикали
Здесь центрирование будет задействовано в обоих направлениях, где все можно аналогично все осуществить, но только немного сложнее будет. Где вам изначально нужно знать точные размеры элемента или объекта.
Код .objectas-centering{
width:500px;
height:300px;
position:absolute;
left:50%;
top:50%;
margin:-100px 0 0 -150px;
}
Здесь просто нужно вписать 50% для значений left и top и после этого объект выставится ровно по центру. Здесь нужно знать, что необходимо сделать, это выставить элемент объекта на заданную половину высоты, там и по ширине влево и по вверх, все делается для того, чтоб он находился в центре.
Демонстрация
| | Страна: (RU) |
| |
| Kosten | Вторник, 04 Сентября 2018 | Сообщение 2 |
|
| Каждый разработчик неизбежно обнаруживает, что центрирование div не так очевидно, как вы ожидали. Центрировать то, что находится внутри div горизонтально легко, но тогда все становится немного липким. Когда вы достигаете центрирования div по вертикали, вы можете оказаться в мире CSS.
Цель этой статьи - показать, как с помощью нескольких трюков CSS любой div может быть центрирован, горизонтально и вертикально или внутри страницы div или любой элемент.
HTML
Код <div class="enteri-ngbasic"></div>
CSS
Код .enteri-ngbasic
{
margin: 0 auto;
width: 100px;
height: 100px;
background-color: #365694;
border-radius: 3px;
}
Значение auto в margin свойстве устанавливает левое и правое поля в доступное пространство внутри страницы. То, что нужно помнить, что ваш центральный div должен иметь width свойство.
Демонстрация
| | Страна: (RU) |
| |
| Kosten | Вторник, 04 Сентября 2018 | Сообщение 3 |
|
| ЦЕНТРИРОВАНИЕ DIV В DIV, СТАРАЯ ШКОЛА
Этот метод работает практически со всеми браузерами.
HTML
Код <div class="koled-sucsol"><div class="dukosami-lpesam"></div></div>
CSS
Код .koled-sucsol
{
padding: 30px;
background-color: #e4e0e0;
}
.dukosami-lpesam
{
margin: 0 auto;
width: 100px;
height: 100px;
background-color: #807c7c;
border-radius: 50px;
}
Автоматический трюк маржи снова наносит удар, где внешний div может быть беспорядочным, но внутренний div должен иметь width свойство.
| | Страна: (RU) |
| |
| Kosten | Вторник, 04 Сентября 2018 | Сообщение 4 |
|
| ЦЕНТРИРОВАНИЕ DIV ПО ГОРИЗОНТАЛИ И ВЕРТИКАЛИ
Это использует автоматический трюк с маркой, чтобы центрировать div как по горизонтали, так и по вертикали, где также работает с каждым браузером.
HTML
Код <div class="vertical-bukopesa"><div class="alomethod-trsaus"></div></div>
CSS
Код .vertical-bukopesa
{
padding: 30px;
background-color: #abbefd;
}
.alomethod-trsaus {
margin: auto;
width: 100px;
height: 100px;
background-color: #716d6d;
border-radius: 50px;
}
Внутренний div должен иметь свойство width и height свойство. Это не работает, если внешний div имеет фиксированную высоту.
| | Страна: (RU) |
| |
| Kosten | Вторник, 04 Сентября 2018 | Сообщение 5 |
|
| ВЕРТИКАЛЬНЫЙ ЦЕНТР В DIV С ПРЕОБРАЗОВАНИЕМ
Это используется transformдля центрирования любого содержимого в div по вертикали. В этом случае этот метод использует пустой элемент HTML в качестве контейнера p. Вы можете много обернуть в пустой элемент.
HTML
Код <div class="pegormance-kerunning"><p>ZorNet.Ru - портал вебмастера</p></div>
CSS
Код .pegormance-kerunning
{
margin: 0 auto;
max-width: 380px;
height: 155px;
background-color: #ddd;
border-radius: 27px;
}
.pegormance-kerunning p
{
position: relative;
top: 50%;
transform: perspective(1px) translateY(-50%);
padding: 30px;
}
Значение perspective уменьшает размывание на дисплеях с высоким разрешением. Вы можете поддержать более ранние версии браузеров используя префиксы для transform, например -webkit-transformи -ms-transform..
Трансформация поддерживается Chrome 63+, IE11, Microsoft Edge 16+, Firefox 57+, Safari 11+, iOS Safari 11.2+ и Chrome для Android 62+.
| | Страна: (RU) |
| |
| Kosten | Вторник, 04 Сентября 2018 | Сообщение 6 |
|
| ЦЕНТРИРОВАНИЕ DIV В НИЖНЕЙ ЧАСТИ СТРАНИЦЫ
Это использует маржу auto и абсолютный внешний div. Такой вариант работает со всеми браузерами.
HTML
Код <div class="norking-tomprove"><div class="curentol-vailable"></div></div>
CSS
Код .norking-tomprove
{
position: absolute;
bottom: 25px;
width: 100%;
}
.curentol-vailable {
margin: 0 auto;
width: 100px;
height: 100px;
background-color: #415382;
border-radius: 97px;
}
Внутренний div должен иметь width свойство. Разрыв со дна страницы задается в bottom свойстве внешнего div. Вы также можете центрировать div в верхней части страницы, заменив bottom свойство на top.
| | Страна: (RU) |
| |
| Kosten | Вторник, 04 Сентября 2018 | Сообщение 7 |
|
| Центрирование div на странице по горизонтали и по вертикали
Это снова использует маржу auto и абсолютный позиционный div. Где аналогично корректно работает со всеми браузерами.
HTML
Код <div class="nativan-eamwokes"></div>
CSS
Код .nativan-eamwokes {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100px;
height: 100px;
background-color: #2d843b;
border-radius: 85px;
}
У div должно быть свойство width и height свойство.
| | Страна: (RU) |
| |
| Kosten | Вторник, 04 Сентября 2018 | Сообщение 8 |
|
| Центрирование div на странице, плюс отзывчивое
Ширина div является отзывчивой, поскольку она реагирует на размер окна просмотра. Он работает практически со всеми браузерами.
HTML
Код <div class="resoluti-equiring"></div>
CSS
Код .resoluti-equiring
{
margin: 0 auto;
max-width: 570px;
height: 100px;
background-color: #c11c58;
border-radius: 5px;
}
Ваш центрированный div должен иметь max-width свойство.
| | Страна: (RU) |
| |
| Kosten | Вторник, 04 Сентября 2018 | Сообщение 9 |
|
| Центрирование div в div, внутренний div отзывчивый
Внутренний div является отзывчивым и будет корректно работать со всеми браузерами.
HTML
Код <div class="display-kouton"><div class="intern-eringus"></div></div>
CSS
Код .display-kouton
{
padding: 28px;
background-color: #a2a2a2;
}
.intern-eringus
{
margin: 0 auto;
max-width: 453px;
height: 100px;
background-color: #3472b5;
border-radius: 10px;
}
Внутренний div должен иметь max-width свойство.
| | Страна: (RU) |
| |
| Kosten | Вторник, 04 Сентября 2018 | Сообщение 10 |
|
| Центрирование двух div блока
HTML
Код <div class="plementation"><div class="reased-gam tukidsa">Реализации DirectX 11 и 12 теперь основаны на Vulkan, что привело к улучшению совместимости игр и снижению производительности.</div><div class="paboties-saeatured graserin">Игры Windows без текущей версии Linux теперь установлены.</div></div>
CSS
Код .plementation
{
text-align: center;
padding: 10px;
}
.reased-gam {
display: inline-block;
max-width: 295px;
text-align: left;
padding: 25px;
background-color: #1e385f;
border-radius: 3px;
margin: 10px;
vertical-align: top;
}
.paboties-saeatured {
display: inline-block;
max-width: 148px;
text-align: left;
padding: 25px;
background-color: #125025;
border-radius: 3px;
margin: 10px;
}
.tukidsa, .graserin
{
font: 15px 'Source Code Pro', monospace;
color: #f4f6f7;
}
@media screen and (max-width: 600px)
{
.reased-gam, .paboties-saeatured
{
max-width: 100%;
}
}
Просто inline-block элементов внутри центрированного контейнера. Это также использует запросы мультимедиа CSS. Когда размер экрана меньше 600 пикселей, max-widthсвойство обоих левого и правого div установлено на 100%.
| | Страна: (RU) |
| |
| Kosten | Вторник, 04 Сентября 2018 | Сообщение 11 |
|
| Центрирование динамического div, горизонтально и вертикально
Этот метод использует display свойство со table значением, заставляя его вести себя как table элемент, центрируя div как по горизонтали, так и по вертикали. Центрированный div может иметь динамический контент, то есть любую высоту или ширину.
HTML
Код <div class="reducede-rormance"><div class="mopleme-natio"><div class="reprod-ucedgun"></div></div></div>
CSS
Код .reducede-rormance
{
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.mopleme-natio
{
display: table-cell;
vertical-align: middle;
}
.reprod-ucedgun
{
margin: 0 auto;
width: 275px;
height: 100px;
background-color: #1b6a73;
border-radius: 7px;
}
Свойства width и height в центрированной DIV может быть что угодно.
Дисплей таблицы поддерживается Chrome 63+, IE11, Microsoft Edge 16+, Firefox 57+, Safari 11+, iOS Safari 11.2+ и Chrome для Android 62+.
| | Страна: (RU) |
| |
| Kosten | Вторник, 04 Сентября 2018 | Сообщение 12 |
|
| Flexbox, div centered
Это центрирует div как по горизонтали, так и по вертикали, ult nfr;t используется Flexbox, модуль компоновки Flexible Box CSS3.
HTML
Код <div class="compan-vitalizing"><div class="dokilosa-leasingta"></div><div>
CSS
Код .compan-vitalizing
{
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.dokilosa-leasingta
{
background-color: #297d82;
border-radius: 17px;
width: 215px;
height: 100px;
}
Свойство height в контейнере может быть что угодно, пока это больше чем центрированные блоки. В этом примере мы используем vh, что является высотой окна браузера, видового экрана, а не высоты страницы. Дополнительные сведения о значениях видовых экранов и их использовании см, использование vw и vh.
| | Страна: (RU) |
| |
