Question

我正在使用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经验的人会知道如何做到这一点。

作为一个注释，还有另一个关于导航丸中心的问题，我尝试过，但它不适用于普通的导航标签。

感谢。

Answer 1

引导程序会自动将

nav-tabs列表项浮动到左侧，因此您必须将其重置为inline-block并将其显示为text-align:center，并且我们必须添加{{1}属性的中心菜单项。 1}}到容器，像这样：

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

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

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

Answer 2

接受的答案是完美的。它可以进一步定制，以便您可以与标准的左对齐标签并排使用。

.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;
}

要使用它，请将“居中”类添加到标签元素

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

Answer 3

添加课程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更自然。

Answer 4

简单地添加

margin-left:50%;

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

例如

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

Answer 5

您可以使用bootstrap grid将导航标签置于中心位置。由于引导网格在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>

Answer 6

如果您使用 bs4 ，只需将justify-content-center类添加到导航选项卡即可使其居中。如果您想使标签合理（全用），请向其添加nav-justified类，在这种情况下，如果您的导航栏中有3个项目，则每个项目都有33％的项目。如果有5个项目，每个项目都有20％。

另一种方法是，如果您使用的是 bs3 ，则只需添加text-center。

Answer 7

‌Bootstrap本身为此提供了一个名为nav-justified的类。只需这样添加即可：

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

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

Answer 8

尝试一下：

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

如何将页面上的Twitter引导选项卡置于中心位置？

8 个答案: