Центровые встроенные блоки с динамической шириной в CSS

Итак, у меня есть страница с динамической шириной. Ниже, обертка div центрирует div внутри. Однако каждый div имеет стиль:

display:inline-block;
width:400px; /* static */

Это делает внутренние divs бок о бок. Но это означает, что есть некоторые пробелы, оставшиеся в зависимости от ширины браузера, и сколько divs могут идти бок о бок, не разбираясь на следующую строку.

Чтобы узнать, для чего я собираюсь, откройте свою вкладку "Новая вкладка Google Chrome" и перетащите окно браузера, чтобы уменьшить ее. Вы увидите, что когда вы заходите слишком далеко, некоторые из приложений Chrome появятся на следующей строке, но все равно остаются центрированными.

В моем случае они попадают в следующую строку и не центрируются.

Вот как выглядит мой код:

<div class="wrapper">
    <div class="iB"></div>
    <div class="iB"></div>
    <div class="iB"></div>
    <div class="iB"></div>
    <div class="iB"></div>
    <div class="iB"></div>
</div>

Я хочу, чтобы внутренние divs были бок о бок, если не было достаточно места, и в этом случае конец будет удаляться до следующей строки вниз, ALL, оставаясь в центре в родительском div.

Спасибо за любую помощь.

Ответ 1

Если вы правильно поняли, что добавление text-align: center в ваши стили .wrapper должно дать желаемый эффект. См. эту скрипту для примера. Измените размер панели результатов, чтобы посмотреть переупорядочение полей.

Как и Akaishen, уже упоминавшиеся потоки встроенных блоков похожи на текст. Поэтому вы можете контролировать их выравнивание с помощью text-align. Однако, если вам нужен очень тонкий контроль над макетом, вы можете столкнуться с проблемами с использованием встроенных блоков. Так как они текут, как текстовые пробелы между ними, например, не игнорируются. И, к сожалению, вы не можете определить абсолютную ширину пространства между браузерами и ОС. Разрывы между блоками в моем примере вызваны этим.

Ответ 2

Поскольку вы используете display: inline-block, теги <div> являются, по существу, встроенными элементами и могут быть написаны как таковые. text-align: center будет центрировать каждый элемент. На этом этапе вам понадобится контейнер/обертка для определения максимальной и минимальной ширины.

Там может быть лучший способ добиться того, что вы ищете, и это не совсем так, как работают окна Chrome, хотя это начало: fiddle