How to Center Navbar Links in Twitter Bootstrap?

Modifying Twitter Bootstrap's Navbar

The Twitter Bootstrap navbar is a versatile component that can be customized to suit different layouts. This article demonstrates how to center the links within the navbar, addressing a common user request.

Issue: Misaligned Links in Navbar

Originally, the links in the navbar were left-aligned, despite the desired outcome of central alignment. Attempts to use pre-existing CSS rules did not yield the desired result.

Solution: Inline Display and Centered Text Alignment

To center the navbar links, we need to set the display property of the links to inline-block and the text-align property of the navbar's container to center. Here's the modified CSS:

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

Custom Class for Targeted Modification

To avoid unwanted modifications to other nav sections, it's advisable to create a custom class targeting the desired navbar menu. For example, we can create a class called "center":

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

Then, we can target this class in our CSS:

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

Submenu Alignment

After centering the main links, it may be necessary to realign the submenu items to the left if they have been affected by the changes. This can be achieved with additional CSS:

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

Live Demonstration

A live demonstration of this solution can be found here: http://jsfiddle.net/C7LWm/7/.

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