@Solovej
Я не я, есть я, при этом всегда им являюсь.

Резиновый DIV чётко по центру

Господа, подскажите пожалуйста.

У меня совсем детский вопрос, но решения на него я не нашёл.

Нужно резиновый DIV поместить чётко по центру (вертикали и горизонтали).

min-width: 900px;
max-width: 1280px;
height: 500px.


Как фиксированный DIV — поместить я знаю, а вот с резиновой вёрсткой — не хватает опыта.
  • Вопрос задан
  • 69062 просмотра
Пригласить эксперта
Ответы на вопрос 5
nazarpc
@nazarpc
Open Source enthusiast
Так пробовали?
margin: 0 auto;
Ответ написан
PaulZi
@PaulZi
Для выравнивания по вертикали нужно либо выставить у родительского элемента display: table-cell и vertical-align: middle, не будет правда работать в ie7. Второй вариант — использовать line-height: 100% у дополнительного мест минского э элемента, и обоим им ввыставить vertical-align middle.
Извиняюсь, что описываю текстом — с телефона пишу.
Ответ написан
Sk8er
@Sk8er
Жесток, опасен, вспыльчив. Щеголь.
Есть ещё вот такое решение, с помощью Flexbox: blog.sk8er.name/rabota/vyravnivanie-bloka-po-centru
Ответ написан
@brruht
Поместить блок в еще один блок у которого есть определенные размеры. И выровнять по центру родительский блок. Полностью резиновый блок будет занимать все доступное пространство, а так его ограничивает родительский блок. В родительском блоке по-моему можно размеры в процентах задавать или ограничивать максимальным значением типа max-width. Тогда он будет уменьшаться в след за вставляемым блоком, но доходя до определенного размера будет переставать расти.

CSS
.wrap {
margin: 0 auto;
max-width: 560px;
max-height: 320px;
}

.thumb-wrap {
position: relative;
padding-bottom: 56.25%; /* задаёт высоту контейнера для 16:9 (если 4:3 — поставьте 75%) */
padding-top: 30px;
height: 0;
overflow: hidden;
}
.thumb-wrap iframe {
position: absolute;
top: 0;
left: 0;
width:100%;
height: 100%;
}

Код на примере вставки видео с ютуб
<div class="wrap">
<div class="thumb-wrap">
<iframe width="560"width="560" height="315" src="https://www.youtube.com/embed/C2i-9qTrPck" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы