我将twitter bootstrap navbar集成到我的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>
这是我的引导程序的图像
然后我在里面添加了这个twitterbootstrap css,试图将ipolice,home,contact和login转移到中心
#twitterbootstrap {
position:absolute;
text-align:center;
}
哪个没用.我参观了这个link并试过但仍然无法做到.请问如何将文本对齐到中心？
解决方法
根据您希望显示品牌链接的位置,这里有两种可能性
http://jsfiddle.net/panchroma/cW9sA/
要么
http://jsfiddle.net/panchroma/GWMnF/
http://jsfiddle.net/panchroma/cW9sA/
要么
http://jsfiddle.net/panchroma/GWMnF/
编辑：第三种变体,iPolice品牌链接始终居中,即使在狭窄的视口也是如此
http://jsfiddle.net/panchroma/F5x5Z/
请注意,在第二个示例中,我已将品牌链接的副本添加到主菜单中,并使用.hidden-desktop和.visible-desktop的实用程序类来微调在不同视口中显示的方式.
重要的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;
}
一些CSS基于Andres Ilich的答案
祝你好运！
