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/

Answer 2

您添加了大量自定义CSS，但最简单的Bootstrap方式是使用AttributeError: 'bytearray' object has no attribute 'tostring'和nav-tabs ..

http://www.codeply.com/go/upP3lh2gxS

nav-justified

Answer 3

在Bootstrap 4中：

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

Answer 4

这是一个更新的小提琴：http://jsfiddle.net/j751b1mb/5/

关键是在导航标签上设置display：flex并将它们对齐在页面的中心。

.nav-tabs {
    display: flex;
    justify-content: center;
    flex-direction: row;
}

通过修改.tabbable-line > .nav-tabs > li

上的边距，您可以对标签的具体位置进行更细粒度的控制

.tabbable-line > .nav-tabs > li {
   margin: auto 2px;
}

例如，上面的代码会将它们均匀地分布在整个线上。

希望有所帮助。

Answer 5

试试这个并替换为

    .nav-tabs > li
    {
    float: none;
     text-align: center;
    }
    .nav > li 
    {
    display: inline-block;
    }

Answer 6

改变css

.tabbable-line{
 text-align:center;
}
/* Default mode */
.tabbable-line > .nav-tabs {  
  display:inline-block;
}

DEMO

Answer 7

在CSS文件或样式标记中尝试此操作：

.nav-tabs

    {
       align-items: center;

    }

Answer 8

在主要元素上使用文本中心或文本中间类。

如何在中心对齐引导标签？

8 个答案: