Центрирование inline-блоков с динамической шириной в CSS - PullRequest
Новая
       26

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

3 голосов
/ 12 февраля 2012

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

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

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

Чтобы понять, к чему я стремлюсь,откройте страницу вкладки Google Chrome New и перетащите окно браузера, чтобы уменьшить его.Вы увидите, что если вы зайдете слишком далеко, некоторые приложения 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>

Я хочу, чтобы внутренние элементы div были рядом, если в них недостаточно места, и в этом случае конец переместится на следующую строку вниз,ВСЕ, оставаясь в центре родительского раздела.

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

Ответы [ 2 ]

5 голосов
/ 12 февраля 2012

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

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

2 голосов
/ 12 февраля 2012

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

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

...