title: Centering multiple div's inside a parent div
body: <p>I'm having a heck of a time with this and after trying to implement what I've read in dozens of posts, I'm still not having any luck with one last part of this.</p>
  
  <p>What I have is a parent div that houses two rows of additional divs.  The first row is a single div and contains a label with a link. The second row contains multiple divs side-by-side.  </p>
  
  <p>The first row (label/link) is centering just fine. What I'm having trouble with is centering the second row of divs. They are all side-by-side, but they are displaying as if I were left-justifying them.</p>
  
  <p>Here is my CSS:</p>
  
  <pre class="lang-css prettyprint-override"><code>div.parent-container {
      position:absolute;
      background-color:#fff;
      top:32px;
      left:-1px;
      width:418px;
      height:67px;
      border-right:solid 1px #000;
      border-left:solid 1px #000;
      border-bottom:solid 1px gray;
      padding-left:2px;
      text-align:center;
      float:left;
  }
  
  div.text-label a {
      position:absolute;
      background-color:#fff;
      font-family:Microsoft Sans Serif,Arial;
      font-weight:bold;
      width:417px;
      height:15px;
      font-size:12px;
      margin-left:auto;
      margin-right:auto;
  }
  
  div.sub-container {
      position:relative;
      width:30px;
      height:auto;
      top:20px;
      float:left;
      padding-right:5px;
      margin-left:auto;
      margin-right:auto;
  }
  
  span.span-text {
      position:relative;
      font-weight:bold;
      font-family:Microsoft Sans Serif,Arial;
      font-size:11px;
      width:30px;
      height:auto;
  }
  div.img1 {
      height:26px;
      width:18px;
      background:url(sprite.png) -72px -144px no-repeat;
      margin-left:auto;
      margin-right:auto;
  }
   div.img2 {
      height:26px;
      width:18px;
      background:url(sprite.png) -95px -143px no-repeat;
      margin-left:auto;
      margin-right:auto;
  }
   div.img3 {
      height:26px;
      width:18px;
      background:url(sprite.png) -117px -143px no-repeat;
      margin-left:auto;
      margin-right:auto;
  }
   div.img4 {
      height:26px;
      width:18px;
      background:url(sprite.png) -141px -143px no-repeat;
      margin-left:auto;
      margin-right:auto;
  }
  </code></pre>
  
  <p>And my HTML:</p>
  
  <pre><code>&lt;div class="parent-container"&gt;
      &lt;div class="text-label"&gt;&lt;a href="www.website.com"&gt;link to website&lt;/a&gt;&lt;/div&gt;
      &lt;div id='div1' class='sub-container'&gt;&lt;span class='span-text'&gt;text1&lt;/span&gt;
          &lt;div class='img1'&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div id='div2' class='sub-container'&gt;&lt;span class='span-text'&gt;text2&lt;/span&gt;
          &lt;div class='img2'&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div id='div3' class='sub-container'&gt;&lt;span class='span-text'&gt;text3&lt;/span&gt;
          &lt;div class='img3'&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div id='div4' class='sub-container'&gt;&lt;span class='span-text'&gt;text4&lt;/span&gt;
          &lt;div class='img4'&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I've tried creating an additional div to house the second row of divs, but that didn't work either.</p>
  
  <p>Any help is greatly appreciated!</p>