Is it possible to center a bunch of floated divs on browser resizing

Question

I have a bunch of left floated divs. On browser resizing,
if no space if available some divs can fall under anothers
I want to know if is there a way to keep the group centered.
Rigth now the div kept left aligned I show you a 'graphic' in hope you can understand me

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

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

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

Imagine number 3 is centered!

My goal is that on browser resizing the floated divs keep centered like number 3

Answer 1

I don't think you're going to have much luck without a lot of awful hacks. If the divs are floated, they're going to be floated either left or right - not centered...

Answer 2

Yes, but it doesn't validate, and you don't float them:

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 3

Smashing Magazine had an article on fluid CSS layouts which might help you figure this out.

Answer 4

<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>

The key to this working is the last span, which ensures the bottom row will be two elements instead of one. Without that the last box will center instead of lining up on the left with the top two. The max-width on the div wrapper should be exactly enough to fit all elements EXCEPT the hidden one.

Working Demo (Tested in FF3, Safari4, IE7 and 8)

For your site the last span will be visibility:hidden (not display:none) but I left it visible to show what's going on.