title: how do I align bootstrap tabs in the center?
body: <p>I have tabs like these:</p>
  
  <pre><code>&lt;ul class="nav nav-tabs "&gt;
      &lt;li class="active"&gt;
          &lt;a href="#tab_default_1" data-toggle="tab"&gt;
              Tab 1
          &lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;a href="#tab_default_2" data-toggle="tab"&gt;
              Tab 2
          &lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;a href="#tab_default_3" data-toggle="tab"&gt;
              Tab 3
          &lt;/a&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>But instead of having them on the left, I'd like them in the center. I tried <code>text-align:center;</code> and even setting <code>margin-left:0</code> and <code>margin-right:0</code> but neither is working. What's the easiest way to do this without re-writing the whole code?</p>
  
  <p>Here's a jsFiddle:</p>
  
  <p><a href="http://jsfiddle.net/j751b1mb/" rel="noreferrer">http://jsfiddle.net/j751b1mb/</a></p>