Можно ли отцентрировать кучу плавающих элементов div при изменении размера браузера?

Question

У меня есть куча левых плавающих элементов. При изменении размера браузера
если нет места, если доступно, некоторые div могут попасть под другие
Я хочу знать, есть ли способ удержать группу в центре.
Rigth теперь div держал влево Я показываю вам «графику» в надежде, что вы меня поймете

1.-
+++++++++++++++++++++++++++++++++
+  +++++++   +++++++   +++++++  +
+  +++++++   +++++++   +++++++  +
+  +++++++   +++++++   +++++++  +
+                               +
+                               +
+++++++++++++++++++++++++++++++++

2.-
++++++++++++++++++++++++++++
+  +++++++   +++++++       +
+  +++++++   +++++++       +
+  +++++++   +++++++       +
+                          +
+  +++++++                 +
+  +++++++                 +
+  +++++++                 +
+                          +
++++++++++++++++++++++++++++

3.-
++++++++++++++++++++++++++++
+    +++++++   +++++++     +
+    +++++++   +++++++     +
+    +++++++   +++++++     +
+                          +
+    +++++++               +
+    +++++++               +
+    +++++++               +
+                          +
++++++++++++++++++++++++++++

Imagine number 3 is centered!

Моя цель состоит в том, чтобы при изменении размера браузера всплывающие дивы оставались в центре, как число 3

Answer 1

Да, но это не проверяет, и вы не можете использовать их:

CSS

div#container {
    text-align: center;
}

div#container>span {
    display: -moz-inline-box; /* FireFox 2 */
    display: inline-block; /* the rest */
    width: 300px;
    height: 100px;
    border: solid 1px;
    margin: 20px;
}

HTML

<div id="container">
    <!-- SPANs for IE, it has a to be an inline element by default to work -->
    <span>I'm some span</span>
    <span>I'm some span</span>
    <span>I'm some span</span>
    <span>I'm some span</span>
    <span>I'm some span</span>
    <span>I'm some span</span>
</div>

Answer 2

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

Answer 3

<style>
div.wrap {
    text-align: center;
    border: 1px solid purple;
    max-width: 620px;
    margin: auto;
    line-height: 0;
}
span {
    width: 200px;
    height: 100px;
    border: 1px solid green;
    display: inline-block;
    margin-top: 4px;
}
</style>

<div class="wrap">
    <span></span> <span></span> <span></span>
    <span style="border:1px solid yellow;height:0px;margin:0"></span>
</div>

Ключом к этой работе является последний диапазон, который гарантирует, что в нижнем ряду будет два элемента вместо одного. Без этого последняя коробка будет центрирована, а не выровнена слева с двумя верхними. Максимальной ширины обёртки div должно быть достаточно, чтобы вместить все элементы, кроме скрытого.

Рабочая демонстрация (протестировано в FF3, Safari4, IE7 и 8)

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