twitter-bootstrap 如何将 twitter bootstrap 导航栏中的文本移到中心？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18376748/
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 do i shift the text in twitter bootstrap navbar to center?
提问by Teo Chuen Wei Bryan
I integrated twitter bootstrap navbar into my asp.net project. However, I'm trying to align my bootstrap text into the center. Here is my source code for my navbar
我将 twitter bootstrap 导航栏集成到我的 asp.net 项目中。但是，我正在尝试将引导文本对齐到中心。这是我的导航栏的源代码
<div id="twitterbootstrap">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">iPolice</a>
<div class="nav-collapse">
<ul class="nav">
<li class="divider-vertical"></li>
<li><a href="#">Home</a></li>
<li class="divider-vertical"></li>
<li><a href="Login.aspx">Login</a></li>
<li class="divider-vertical"></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
This is the image of my bootstrap
这是我的引导程序的图像
Then i added this twitterbootstrap css inside to attempt and shift the ipolice, home, contact and login into the center
然后我在里面添加了这个 twitterbootstrap css 来尝试将 ipolice、home、contact 和 login 转移到中心
#twitterbootstrap {
position:absolute;
text-align:center;
}
which didnt work. I visited this linkand tried but still wasn't able to do it. May i ask how do i align my text into the center?
这没有用。我访问了这个链接并尝试过，但仍然无法做到。请问如何将文字居中对齐？
回答by David Taiaroa
Depending on where you want the Brand link to appear, here are two possiblities
http://jsfiddle.net/panchroma/cW9sA/
or
http://jsfiddle.net/panchroma/GWMnF/
根据您希望品牌链接出现的位置，这里有两种可能性
http://jsfiddle.net/panchroma/cW9sA/
或
http://jsfiddle.net/panchroma/GWMnF/
EDIT: A third variation where the iPolice brand link is always centered, even at narrow viewports
http://jsfiddle.net/panchroma/F5x5Z/
编辑：第三个变体，其中 iPolice 品牌链接始终居中，即使在狭窄的视口
http://jsfiddle.net/panchroma/F5x5Z/
Note that in the second example I've added a copy of the brand link into the main menu, and used the utility classes of .hidden-desktop and .visible-desktop to fine tune how this is displayed at different viewports
请注意，在第二个示例中，我已将品牌链接的副本添加到主菜单中，并使用 .hidden-desktop 和 .visible-desktop 的实用程序类来微调它在不同视口中的显示方式
Important CSS is
重要的 CSS 是
#twitterbootstrap .navbar .nav,
#twitterbootstrap .navbar .nav > li {
float:none;
display:inline-block;
*display:inline; /* ie7 fix */
*zoom:1; /* hasLayout ie7 trigger */
vertical-align: top;
}
#twitterbootstrap .navbar-inner {
text-align:center;
}
Some of this CSS is based on an answer from Andres Ilich
其中一些 CSS 是基于Andres Ilich的回答
Good luck!
祝你好运！
