如何将twitter引导标签集中在页面上？
我使用twitter引导来创build可切换的选项卡。 这是我使用的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/
编辑：在用户提供的IE7 +工作的补丁版本@My Head在下面的评论中伤害。
演示： http : //jsfiddle.net/U8HGz/3/show/编辑： http : //jsfiddle.net/U8HGz/3/
接受的答案是完美的。 它可以进一步定制，以便您可以与标准左alignment的选项卡并排使用。
.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; }
要使用它，请将“居中”类添加到tab元素
<ul class="nav nav-tabs centered" > .. </ul>
导航alignment的作品对我来说..这不仅中心的标签，而且还把它们放在顶部。 像这样：
<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>
尽pipe接受的答案效果很好，但我发现上述更自然的引导
您可以使用引导程序网格来居中您的导航标签。 由于引导程序网格被分成12列，您可以轻松使用4列进行4列偏移导航：
<div class="col-sm-4 col-sm-offset-4">
因此，您正在页面中间导航（也是响应式解决scheme），在左侧和右侧有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>
简单地添加
margin-left:50%;
当我设置我的标签，为我工作。
例如
<ul class="nav nav-tabs" style="margin-left:50%; margin-right:50%;">
