如何在页面上将twitter bootstrap选项卡居中？

我正在使用twitter bootstrap创建可切换的标签。这是我正在使用的CSS：

<div class="container">
  <ul class="nav nav-tabs">
    <li><a href="#home" data-toggle="tab">Home</a></li>
    <li><a href="#profile" data-toggle="tab">Profile</a></li>
    <li><a href="#messages" data-toggle="tab">Messages</a></li>
    <li><a href="#settings" data-toggle="tab">Settings</a></li>
  </ul>
</div>

此html正确显示选项卡，但向左拉（应该发生这种情况）。我已经尝试过修改CSS，以使标签位于页面的中心位置，但还没有走运。我以为有更多CSS经验的人会知道该怎么做。

需要注意的是，还有一个关于定心导航药丸的问题，我尝试过，但它不适用于普通的导航标签。

谢谢。

nav-tabs列表项会由引导程序自动浮动到左侧，因此您必须将其重置，而是将其显示为inline-block，对于居中菜单项，我们必须将属性添加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/show/ 在此处编辑：http : //jsfiddle.net/U8HGz/2/

编辑：修补版本，可在用户@My Head Hurts在下面的注释中提供的IE7 +版本中使用。

演示：http : //jsfiddle.net/U8HGz/3/show/ 在此处编辑：http : //jsfiddle.net/U8HGz/3/

接受的答案是完美的。可以进一步对其进行自定义，以便您可以将其与标准的左对齐选项卡并排使用。

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

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

要使用它，请将“ centered”类添加到tabs元素

<ul class="nav nav-tabs centered" >
..
</ul>

添加课程 nav-justified对我有用。这不仅使标签居中对齐，而且还可以在顶部很好地分布它们。

<ul class="nav nav-tabs nav-justified">
    <li><a href="#Page1">Page1</a></li>
    <li><a href="#Page2">Page2</a></li>
    <li><a href="#Page3">Page3</a></li>
    <li><a href="#Page4">Page4</a></li>
  </ul>

即使接受的答案效果很好，我也对Bootstrap感到很自然。

只需添加

margin-left:50%;

当我设置标签时，为我工作。

例如

<ul class="nav nav-tabs" style="margin-left:50%; margin-right:50%;">

您可以仅使用引导网格来使导航标签居中。由于引导网格划分为12个相等的列，因此您可以轻松地将4列用于导航，并偏移4列：

<div class="col-sm-4 col-sm-offset-4">。

因此，您将在页面中间（也是响应性解决方案）的左侧和右侧有4列自由导航。

我发现网格对于制作响应式网页非常有用。祝好运！

<div class="row-fluid">
  <div class="col-sm-12">
    <div class="col-sm-4 col-sm-offset-4">
      <ul class="nav nav-tabs">
        <li><a href="#home" data-toggle="tab">Home</a></li>
        <li><a href="#profile" data-toggle="tab">Profile</a></li>
        <li><a href="#messages" data-toggle="tab">Messages</a></li>
        <li><a href="#settings" data-toggle="tab">Settings</a></li>
      </ul>
    </div>
  </div>
</div>

如果仅使用bs4，则可以将justify-content-center类添加到导航选项卡中，以使其在页面上居中。如果您希望标签合理（全功能），请添加nav-justified类，在这种情况下，如果您的导航中有3个项目，则每个项目都有33％的资产。如果有5个项目，每个项目都有20％。

另一种方法是简单地添加，text-center如果您使用bs3。

ot引导程序本身为此提供了一个名为的类nav-justified。只需像这样添加它：

<ul class="nav nav-tabs nav-justified">

如果您也想使的中心内容对齐，请将<li>其设为disply: inline-block。

试试这个：

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