css - 如何在中心对齐 Bootstrap 选项卡？

Question

我有这样的标签:

<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>

但我不希望它们位于左侧，而是位于中间。我尝试了 text-align:center; 甚至设置了 margin-left:0 和 margin-right:0 但都没有用。在不重写整个代码的情况下执行此操作的最简单方法是什么？

这是一个 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/