3

我将 twitter 引导导航栏集成到我的 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;
}

这没有用。我访问了这个链接并尝试了但仍然无法做到。请问我如何将我的文本对齐到中心？

4

1 回答 1

5

根据您希望品牌链接出现的位置，这里有两种可能性 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的回答

祝你好运！

于 2013-08-22T10:59:35.220 回答