title: How to center multiple floated divs with fixed size
body: <p>I want the child divs to be always centered within their container, even on resize, and without changing their size.</p>
  
  <p>Problem Example : <a href="http://jsfiddle.net/bQMj7/" rel="nofollow">http://jsfiddle.net/bQMj7/</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id='foo'&gt;&lt;div id="container" class='group'&gt;
      &lt;div class='childs'&gt;one&lt;/div&gt;
      &lt;div class='childs'&gt;two&lt;/div&gt;
      &lt;div class='childs'&gt;three&lt;/div&gt;
      &lt;div class='childs'&gt;four&lt;/div&gt;
      &lt;div class='childs'&gt;five&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#foo {
         text-align:center;
      }
  
  #container {
      background-color:beige;
      display:inline-block;
  }
  
  .childs {
      width:50px;
      height:50px;
      background-color:blue;
      float:left;
      margin-right:10px;
  }
  
  .group:after {
      clear: both;
      content: "";
      display: table;
  }
  </code></pre>
  
  <p>I used the "inline-block / text-align:center" technique to center the child divs in their main container. When you resize the window, the floated child divs collapse, that's what I want, BUT as they collapse they're not centered anymore within their container. </p>
  
  <p>I want the cloud of these collapsing-on-resize divs, to be always centered.</p>
  
  <p>Do you have any idea?</p>
  
  <p><strong>Edit</strong> : Thanks for the reply, that's pretty much what I'm looking for ! My concern however is that:</p>
  
  <ul>
  <li><p>The reason why I used float left instead of inline-block is that I wanted those child divs to have no space between each others (which they do have as line elements unless I mess up my code indents to have those many childs on the same line code)</p></li>
  <li><p>I want the collapsing final line to be aligned left just as the other lines, but the whole being centered.</p></li>
  </ul>
  
  <p>Here's an update with the two issues above : <a href="http://jsfiddle.net/bQMj7/6/" rel="nofollow">http://jsfiddle.net/bQMj7/6/</a>.</p>