Question

我有一个使用Bootstrap 3的网页。在这个页面中，我有几个标签。此时，标签在顶部左对齐。您可以在Bootply中看到自己。我试图弄清楚如何使标签显示在标签条的中心。截至目前，它看起来像这样：

+-------+-------+
| Tab 1 | Tab 2 |
+       +-------+--------------------------------------------------+
| content                                                          |
|                                                                  |
|                                                                  |
|                                                                  |
+------------------------------------------------------------------+

但是，我试图让它看起来像这样：

                          +-------+-------+
                          | Tab 1 | Tab 2 |
+-------------------------+       +--------------------------------+
| content                                                          |
|                                                                  |
|                                                                  |
|                                                                  |
+------------------------------------------------------------------+

我尝试使用文本中心类但没有成功。我知道ul是块级元素，因此它填充了容器的宽度。出于这个原因，我尝试在ul上设置float:left。但这也不起作用。再一次，Bootply是here。代码如下所示：

<div class="container-fluid">
    <div class="container">
        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active"><a href="#first" aria-controls="first" role="tab" data-toggle="tab">First Tab</a></li>
            <li role="presentation"><a href="#second" aria-controls="second" role="tab" data-toggle="tab">Second Tab</a></li>
        </ul>
    </div>
</div>

<div class="container">
    <div class="row">
        <div class="col-xs-12">
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="first">
                    <h2>First Tab</h2>
                </div>

                <div role="tabpanel" class="tab-pane" id="second">
                    <h2>Second Tab</h2>
                </div>
            </div>
        </div>
    </div>
</div>

我不确定如何让标签居中。

Answer 1

我认为这正是您所寻找的https://stackoverflow.com/a/9422253/5168300

复制这个答案

nav-tabs列表项由引导程序自动浮动到左侧，因此你必须重置它，而不是将它们显示为内联块，而对于中心菜单项，我们必须添加text-align：center的属性到容器，如下：

CSS

.nav-tabs > li, .nav-pills > li { float:none; display:inline-block; *display:inline; /* ie7 fix */ zoom:1; /* hasLayout ie7 trigger */ }

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

此处：http://jsfiddle.net/U8HGz/2/

编辑：在用户提供的IE7 +中修补的版本@My Head在下面的评论中受到伤害。

Answer 2

您必须更新li和ul.nav-tabs { text-align: center; } ul.nav-tabs li { float: none; display: inline-block; }的css，如下所示：

{{1}}

这是一个小提琴的链接：https://jsfiddle.net/m0nk3y/pwyumb3k/

Answer 3

你可以试试这段代码

HTML：

   <ul class=" ul-center" role="tablist">
           <li><a href="#">Item 1</a>    </li>
           <li><a href="#">Item 2</a>    </li>  
    </ul>

CSS：

.ul-center{
  margin:0;
  padding:0;
  clear:both;
  text-align:center;
}
.ul-center li{
  display:inline-block;
  padding:10px 20px;
  background-color:#fff;
  margin:0;
}

现场演示：https://jsfiddle.net/czd60374/1/

Bootstrap - 容器中的中心选项卡

3 个答案: