CSS 如何将 Twitter-Bootstrap 3 导航栏链接居中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18093630/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I center Twitter-Bootstrap 3 navbar links?
提问by Ashley Brown
How can I center the buttons in the jsFiddle I set up so that the buttons are equally spaced and centered within and through-out the navbar?
如何在我设置的 jsFiddle 中将按钮居中，以便按钮在导航栏内和整个导航栏中等距间隔并居中？
I have tried different methods such as
我尝试了不同的方法，例如
display:inline-block;margin:0 auto; text-align:center;
But I cannot get it to work.
但我无法让它工作。
If you could give a little explanation instead of just fixing the CSS as I want to learn so I do not have to keep coming back here.
如果你能给出一点解释，而不是像我想学习的那样仅仅修复 CSS，那么我就不必再回到这里了。
EDIT:
编辑：
Just like how they are centered here ^.
就像他们在这里的中心一样^。
回答by Zim
Bootstrap 3has a nav-justifiedclass that can be used on nav. No extra CSS required:
Bootstrap 3有一个nav-justified可以在nav. 不需要额外的 CSS：
<div class="container">
<h3 class="text-muted">Project name</h3>
<ul class="nav nav-justified">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
Demo: http://bootply.com/72519
Based on the comments, to have full-width centered links using the navbar-navclass, use flexbox...
根据评论，要使用navbar-nav该类获得全角居中链接，请使用 flexbox ...
.navbar-center {
width:100%;
display: flex;
}
.navbar-center>li {
flex:1 1 auto;
}
<div class="navbar navbar-default">
<div class="container">
<ul class="nav navbar-nav navbar-center text-center">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">More</a></li>
<li><a href="#">Options</a></li>
</ul>
</div>
</div>
https://www.codeply.com/go/6ZE3obnpuP
https://www.codeply.com/go/6ZE3obnpuP
Also see
Bootstrap NavBar with left, center or right aligned items
Center Navbar in Bootstrap
另请参阅
Bootstrap NavBar，带有左对齐、居中或右对齐的项目
Bootstrap 中的 Center Navbar
回答by Sushanth --
Add the style
添加样式
.nav{
text-align: center;
}
This will center the text in li.
这将使 li 中的文本居中。
These styles should be sufficient. You were trying to apply styles to to the wrong element.
这些样式应该足够了。您试图将样式应用于错误的元素。
// This is being applied by the bootstrap
// Set it to 25px instead of the default 15px
.navbar{
padding : 0 25px;
}
// Gave a width of 110px for each li
// as the container is following a fixed width format
li{
width:110px;
}
