title: Center any amount of divs inside a parent div with CSS
body: <p>I have a parent DIV (a menu bar) with a random number of child divs. I'm looking for a clean, simple CSS that will always center the child divs horizontally, regardless of their width or the number of divs (as long as they fit inside the parent). I don't want to have to calculate all the widths or use absolute positioning. </p>
  
  <p>After looking at several solutions I came up with this code, but the child divs still don't center properly, especially when you fill them with text or images.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div id="menubar"&gt;
     &lt;div id="button"&gt;too much text will offset the other buttons&lt;/div&gt;
     &lt;div id="button"&gt;b2&lt;/div&gt;
     &lt;div id="button"&gt;b3&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>#menubar {
      position:absolute;
      bottom:0px;
      background-color: #00A0E2;
      width:100%; height:80px;
      text-align:center;
  } 
  
  #button {
      margin: 5px auto 5px auto;
      width:120px;height:70px;
      display:inline-block;
      background-color:white;
      cursor: pointer;
  }
  </code></pre>
  
  <p>I have created this JSFiddle to illustrate my problem: <a href="http://jsfiddle.net/mZ2P2/" rel="nofollow">http://jsfiddle.net/mZ2P2/</a></p>