Div не центрирует CSS
Итак, у меня есть несколько блоков, которые я хочу центрировать. В настоящее время я использую этот код css для чего-то, что я называю «контейнерный div» - вы, скорее всего, слышали об этом «контейнере» раньше.
#container {
margin: auto;
width: 75%;
margin-top: 100px;
}
Хотя кажется, что это не центрирует div при изменении размера окна; Если я изменю размер окна, блоки div будут следовать за ним медленно и тем самым -двигаться дальше от центра.
Скрипка - https://jsfiddle.net/kud3f01n/
Что заставляет div так себя вести?
Укажите в своем вопросе соответствующий код минимальный воспроизводимый пример.
это не может с этой структурой
Вы не объясняете, что хотите сделать так ясно, как могли бы. В настоящий момент ваш пример работает именно так, как должен. Как сказал Темани Афиф, вы установили ширину и поля ваших внутренних блоков статическими, поэтому они не будут регулироваться по размеру, как экран. Затем происходит то, что они становятся элементами с горизонтальной прокруткой. Поэтому вместо того, чтобы просто сказать, что это «не работает», пожалуйста, объясните, как вы хотите, чтобы это работало.
Обратите внимание: у вас не может быть нескольких элементов с одним и тем же идентификатором. Вместо этого вы должны использовать класс.
@TemaniAfif Спасибо! не могли бы вы опубликовать ответ, чтобы я его принял;)
Ответы 2
Попробуй это
#container {
height:50px;
width:50px;
position:absolute;
left:50%;
top:50%;
margin: 0 auto;
}
Как было проверено в вашем примере, я обнаружил, что вы создали дизайн этих блоков, используя поля (отрицательные и высокие значения диапазона). Следовательно, даже если вы указываете ширину основного контейнера 75% или любую другую, она все равно будет переполняться из родительского div. И этот вид CSS создаст критические проблемы на небольших устройствах.
Предложение: Старайтесь избегать этого типа CSS. И если вам нужно это выравнивание типов, и оно не должно работать в отзывчивом режиме, вы также можете использовать некоторые сторонние плагины, такие как masonry.js и т. д.,
вы выдаете не центрирование, а переполнение ... контейнер имеет процентную ширину, а внутренние элементы имеют ширину в пикселях