How to Center Navigation Links in Twitter Bootstrap Navbar?

Modifying Twitter Bootstrap Navbar to Center Links

When working with the Twitter Bootstrap navbar, users may encounter the need to align navigation links centrally, rather than the default left alignment. To achieve this, make the following customizations using the CSS stylesheet.

Solution

To center the navigation links in the navbar, implement the following CSS code:

<code class="css">.navbar .nav,
.navbar .nav > li {
    float: none;
    display: inline-block;
    *display: inline; /* ie7 fix */
    *zoom: 1; /* hasLayout ie7 trigger */
    vertical-align: top;
}

.navbar-inner {
    text-align: center;
}</code>

Alternative Approach

To preserve the Bootstrap defaults and target a specific navbar menu, create a custom class and apply it to the navbar container:

<code class="html"><div class="navbar navbar-fixed-top center">
    <div class="navbar-inner">
        ....
    </div>
</div></code>

Then, target the .center class in the CSS stylesheet:

<code class="css">.center.navbar .nav,
.center.navbar .nav > li {
    float: none;
    display: inline-block;
    *display: inline; /* ie7 fix */
    *zoom: 1; /* hasLayout ie7 trigger */
    vertical-align: top;
}

.center .navbar-inner {
    text-align: center;
}</code>

Additional Considerations

To align submenu items to the left, add the following CSS rule:

<code class="css">.center .dropdown-menu {
    text-align: left;
}</code>

The above is the detailed content of How to Center Navigation Links in Twitter Bootstrap Navbar?. For more information, please follow other related articles on the PHP Chinese website!