Центрирование сетки переменной ширины после изменения размера страницы

Вот образ того, что я хочу сделать в CSS: image .

Есть идеи?

Первоначальная проблема

Центрирование элемента, который не имеет явной ширины

Это предотвращает обычное решение margin: 0 auto; от выбора.

Большая проблема

Нет неиспользованного пространства для центрирования обертки в контейнере

Элемент, как говорят, усаживается, если его ширина определяется шириной его содержимого. Если содержимое изменяется в размере, ширина элемента изменяется также. Это поведение по умолчанию для элементов, которые являются встроенными, встроенными блоками или плавают.

Когда содержимое в обернутом термоусадочным родителем обертывании вокруг следующей строки, родительский объект перестает быть сжатым; теперь он занимает полную ширину своего контейнера. Технически, родитель центрируется, поскольку он полностью заполняет контейнер, но его содержимое не центрировано. И если у родителя нет заметного изображения bg или обоев, родительский элемент также не будет центрирован.

Это также относится к некоторым из более продвинутых функций, таких как CSS3 flexbox, что, по-видимому, препятствует тому, чтобы это был вариант.

Решение

Запросы СМИ

Оказывается, есть простое решение CSS. Основная проблема заключается в том, что одна макетная grid такого типа не может поддерживать широкий диапазон размеров экрана и по-прежнему центрировать контент. Но с помощью мультимедийных запросов CSS3 может быть создано множество макетов сетки с соответствующим выбором, основанным на размере экрана.

Например, создается grid макета с 1 столбцом, а также одна с двумя столбцами и одна с тремя столбцами и т. Д. Для количества столбцов, которое может потребоваться. Какая бы grid не соответствовала текущему размеру экрана, это тот, который используется. Макеты компоновки могут быть идентичными, за исключением фиксированной ширины каждой из них, ширины, которая достаточно велика, чтобы соответствовать количеству столбцов. Поскольку каждая grid имеет фиксированную ширину, становится тривиальной, чтобы центрировать их горизонтально, используя margin: 0 auto; ,

Другими словами, вместо того, чтобы пытаться заставить единый макет обрабатывать весь диапазон размеров браузера, создайте множество макетов и выберите тот, который может легко обрабатывать текущий размер браузера.

Поместите все div в другой div и сделайте маржу auto с обеих сторон. См. Этот исчерпывающий пример: проблема центрирования div с помощью css

Просто присвойте свойство CSS оболочке как

 #wrapper{ margin: 0px auto; } 

Вышеуказанный код автоматически выравнивает центр при изменении размера windows браузера. Это процесс добавления реакции на вашу страницу.

Вы хотите, чтобы div, который вы хотите центрировать, должен иметь ширину, и вы должны установить маржу автоматически. Вот пример:

 < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   Example    

Я слишком ленив, чтобы реализовать Media Queries (и несколько сценариев для учета), я реализовал простое решение. Поместите изображения в неупорядоченный список (где li {display: inline-block}), а затем (text-align: center) обертка. Откорректируйте свои поля и т. Д., Чтобы сделать его красивым.