title: Tabs to make center aligned
body: <p><a href="http://emulate.themewoot.com/shortcodes/tabs-and-toggles/" rel="nofollow noreferrer">This</a> is the WordPress theme tab I am working on and I am trying to make he tabs center aligned. I tried to make various changes in the firebug but the alignment doesn't set to center accurately cause when I change the width the alignment gets unaligned. Kindly let me know how can I make the tabs center aligned like following image which should work regardless whatever the width is:</p>
  
  <p><img src="https://i.stack.imgur.com/Ns7uf.png" alt=""></p>
  
  <pre><code>/*Tab*/
  .shortcode-tab-wrap .tabs {
      list-style: none;
      margin: 0;
  }
  
  .shortcode-tab .tabs li.tab {
      float: left;
      position: relative;
  }
  
  .shortcode-tab .tabs li.tab a {
      display: block;
      height: 45px;
      line-height: 45px;
      padding: 0 20px;
  }
  
  .shortcode-tab .tabs li.tab a .separate {
      position: absolute;
      bottom: -1px;
      left: 0;
      width: 100%;
      height: 1px;
      display: block;
  }
  
  .shortcode-tab .tabs-content {
      padding: 20px;
  }
  
  .shortcode-left-tab {
      position: relative;
  }
  
  .shortcode-left-tab .tabs {
      position: absolute;
      top: 0;
      left: 2px;
      width: 200px;
  }
  
  .shortcode-left-tab .tabs li.tab {
      position: relative;
  }
  
  .shortcode-left-tab .tabs li.tab a {
      display: block;
      height: 45px;
      line-height: 45px;
      padding: 0 20px;
  }
  
  .shortcode-left-tab .tabs li.tab a .separate {
      position: absolute;
      top: 0;
      right: -1px;
      width: 1px;
      height: 45px;
      display: block;
  }
  
  .shortcode-left-tab .tabs-content {
      margin-left: 202px;
      padding: 20px;
  }
  </code></pre>