title: center multiple nested div tags in one div container tag
body: <p>so i have one large div tag. the css style for this is:</p>
  
  <pre><code>.thumbcontainer {
      width: 900px;
      margin-top: 0px;
      margin-right: auto;
      margin-bottom: 0px;
      margin-left: auto;
      display: block;
      overflow: hidden;
  }
  </code></pre>
  
  <p>i have 4 div tags in that. the css style for them:</p>
  
  <pre><code>.thumbnails {
      float: left;
      margin-top: auto;
      margin-right: 10px;
      margin-bottom: auto;
      margin-left: 10px;
  }
  </code></pre>
  
  <p>and finally the code:</p>
  
  <pre><code>&lt;div class="thumbcontainer"&gt;
  
  &lt;div class="thumbnails"&gt;
  &lt;a href="gallery/1.jpg" style="" rel="lightbox[gallery]"&gt;&lt;img src="gallery/1-thumbnail.jpg" width="150" height="112"  alt=""/&gt;&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;div class="thumbnails"&gt;
  &lt;a href="gallery/2.jpg" rel="lightbox[gallery]"&gt;&lt;img  src="gallery/2-thumbnail.jpg" width="150" height="112"  alt=""/&gt;&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;div class="thumbnails"&gt;
  &lt;a href="gallery/3.jpg" rel="lightbox[gallery]"&gt;&lt;img  src="gallery/3-thumbnail.jpg" width="150" height="112"  alt=""/&gt;&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;div class="thumbnails"&gt;
  &lt;a href="gallery/4.jpg" rel="lightbox[gallery]"&gt;&lt;img  src="gallery/4-thumbnail.jpg" width="150" height="112"  alt=""/&gt;&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;/div&gt; &lt;!-- End of thumbcontainer div --&gt;
  </code></pre>
  
  <p>it works, but there all left aligned with obviously 20(10x2) pixels in between them.
  i tried changing thumbcontainer to text center aligned didnt do anything.</p>