title: How can I center div in div in IE7
body: <p>HTML:</p>
  <pre><code>&lt;div class=&quot;wrapper&quot;&gt;
      &lt;div class=&quot;box&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;box&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;box&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;box&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;box&quot;&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>CSS:</p>
  <pre><code>.wrapper{
      width:1000px;
      text-align:center;
      float:left;    
  }
  
  .wrapper .box{
      width:300px;
      height:50px;
      display:inline-block;
      background:#F00;
      margin:0 10px 10px 0;
      overflow:hidden;
   }
  </code></pre>
  <p>I want to center all div in wrapper div like this;<img src="https://i.stack.imgur.com/SdtBC.jpg" alt="enter image description here" /></p>
  <p>Above codes work fine in IE8,IE9,Chrome,Safari,Opera,FF but not working in IE7. When I open page in IE7, page looks like this;</p>
  <p><img src="https://i.stack.imgur.com/r4NuD.jpg" alt="enter image description here" /></p>
  <p>If I use float:left, the problem seems to be solved but all divs based on the left. How can I solve this?</p>
  <p><a href="http://jsfiddle.net/eBxFX/2/" rel="nofollow noreferrer">http://jsfiddle.net/eBxFX/2/</a></p>