how do I align bootstrap tabs in the center?

Question

I have tabs like these:

<ul class="nav nav-tabs ">
    <li class="active">
        <a href="#tab_default_1" data-toggle="tab">
            Tab 1
        </a>
    </li>
    <li>
        <a href="#tab_default_2" data-toggle="tab">
            Tab 2
        </a>
    </li>
    <li>
        <a href="#tab_default_3" data-toggle="tab">
            Tab 3
        </a>
    </li>
</ul>

But instead of having them on the left, I'd like them in the center. I tried text-align:center; and even setting margin-left:0 and margin-right:0 but neither is working. What's the easiest way to do this without re-writing the whole code?

Here's a jsFiddle:

http://jsfiddle.net/j751b1mb/

Answer 1

.nav-tabs > li {
    float:none;
    display:inline-block;
    zoom:1;
}

.nav-tabs {
    text-align:center;
}

http://jsfiddle.net/j751b1mb/4/

Answer 2

In Bootstrap 4:

<ul class="nav nav-tabs justify-content-center">