我如何将文本在twitter bootstrap navbar中心？ [英] How do i shift the text in twitter bootstrap navbar to center?

问题描述

我将twitter bootstrap navbar集成到我的asp.net项目中。但是，我试图将我的引导文本对齐到中心。这是我的navbar的源代码

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

<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>

这是我的bootstrap的形象

This is the image of my bootstrap

twitterbootstrap css在里面尝试并转移ipolice，主页，联系人并登录中心

Then i added this twitterbootstrap css inside to attempt and shift the ipolice, home, contact and login into the center

#twitterbootstrap {
position:absolute;
text-align:center;
}

我访问了此链接，但尝试了但仍然wasn'能够做到。

which didnt work. I visited this link and tried but still wasn't able to do it. May i ask how do i align my text into the center?

推荐答案

根据您想要的品牌链接的显示位置，是两个可能性
http://jsfiddle.net/panchroma/cW9sA/

或

http://jsfiddle.net/panchroma/GWMnF/

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/

编辑：第三种变体，其中iPolice品牌链接总是居中，即使在狭窄的视口

http://jsfiddle.net/panchroma/F5x5Z/

A third variation where the iPolice brand link is always centered, even at narrow viewports
http://jsfiddle.net/panchroma/F5x5Z/

请注意，在第二个示例中，我已将品牌链接的副本添加到主菜单，并使用.hidden-desktop和.visible-desktop的实用程序类微调如何在不同视口显示

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

重要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

祝你好运！

这篇关于我如何将文本在twitter bootstrap navbar中心？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！