title: How to Center CSS Tabs
body: <p>been using some CSS tabs from CSS tricks. They work great, only problem is I need the tabs themselves to be in the center of the page, three in a row, like this site:</p>
  
  <p><a href="http://lewishowes.com/" rel="nofollow">http://lewishowes.com/</a> (3 tabs right under the sponsors)</p>
  
  <p>Here's a jsfiddle:</p>
  
  <p><a href="http://jsfiddle.net/4zrsD/" rel="nofollow">http://jsfiddle.net/4zrsD/</a></p>
  
  <p>And here's the code:</p>
  
  <p>CSS</p>
  
  <pre><code>.tabs {
    position: relative;   
    min-height: 200px; /* This part sucks */
    clear: both;
    margin: 25px 0;
  }
  .tab {
    float: left;
  }
  .tab label {
    background: #eee; 
    padding: 10px; 
    border: 1px solid #ccc; 
    margin-left: -1px; 
    position: relative;
    left: 1px; 
  }
  .tab [type=radio] {
    display: none;   
  }
  .content {
    position: absolute;
    top: 28px;
    left: 0;
    background: white;
    right: 0;
    bottom: 0;
    padding: 20px;
    border: 1px solid #ccc; 
  }
  [type=radio]:checked ~ label {
    background: white;
    border-bottom: 1px solid white;
    z-index: 2;
  }
  [type=radio]:checked ~ label ~ .content {
    z-index: 1;
  }  
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="tabs"&gt;
  
     &lt;div class="tab"&gt;
         &lt;input type="radio" id="tab-1" name="tab-group-1" checked&gt;
         &lt;label for="tab-1"&gt;Tab One&lt;/label&gt;
  
         &lt;div class="content"&gt;
             stuff
         &lt;/div&gt; 
      &lt;/div&gt;
  
     &lt;div class="tab"&gt;
          &lt;input type="radio" id="tab-2" name="tab-group-1"&gt;
         &lt;label for="tab-2"&gt;Tab Two&lt;/label&gt;
  
          &lt;div class="content"&gt;
             stuff
         &lt;/div&gt; 
     &lt;/div&gt;
  
      &lt;div class="tab"&gt;
          &lt;input type="radio" id="tab-3" name="tab-group-1"&gt;
          &lt;label for="tab-3"&gt;Tab Three&lt;/label&gt;
  
         &lt;div class="content"&gt;
             stuff
         &lt;/div&gt; 
      &lt;/div&gt;
  
     &lt;/div&gt;
  </code></pre>
  
  <p>Thanks!</p>