title: Center float boxes horizontally
body: <p>I want to display some floating boxes (divs containing thumbnails) and the number of thumbnails depends on the current page width. For example:</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="box1" style="float:left;width:120px;height:120px;margin-right:10px;"&gt;Thumbnail image here&lt;/div&gt;
    &lt;div class="box2" style="float:left;width:120px;height:120px;margin-right:10px;"&gt;Thumbnail image here&lt;/div&gt;
    &lt;div class="box3" style="float:left;width:120px;height:120px;margin-right:10px;"&gt;Thumbnail image here&lt;/div&gt;
    &lt;div class="box4" style="float:left;width:120px;height:120px;margin-right:10px;"&gt;Thumbnail image here&lt;/div&gt;
      .......... ETC
  &lt;/div&gt;
  </code></pre>
  
  <p>the problem is that for a given width it shows for example 4 boxes on each row, but they are all left aligned and there is some white space to the right, how can i center horizontally for each row??</p>
  
  <p>Something like this: <a href="http://realworldstyle.com/thumbs_3.html" rel="nofollow noreferrer">http://realworldstyle.com/thumbs_3.html</a> but with boxes centered horizontally on the page...</p>
  
  <p>thanks in advance,</p>