3

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>

This is the image of my bootstrap

enter image description here

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

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?

Community
  • 1
  • 1
Bryan
  • 8,488
  • 14
  • 52
  • 78

1 Answers1

5

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/

EDIT: A third variation where the iPolice brand link is always centered, even at narrow viewports
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

Important CSS is 

#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

Good luck!

Community
  • 1
  • 1
David Taiaroa
  • 25,157
  • 7
  • 62
  • 50
  • I'm actually trying to bring over the word "iPolice and the other link" to the center as well. Actually when my link collapse under a menu, they are already in the center – Bryan Aug 23 '13 at 00:44
  • No problem, here's a variation where iPolice is centered: http://jsfiddle.net/panchroma/F5x5Z/ – David Taiaroa Aug 23 '13 at 11:31