How to Center Twitter Bootstrap Navbar Links?

Centralizing Twitter Bootstrap Navbar Links

In an attempt to align the links in Twitter Bootstrap's navbar to the center, a user encountered challenges implementing the suggested CSS:

.tabs, .pills {
  margin: 0 auto;
  padding: 0;
  width: 100px;
}

However, alternative solutions exist.

Approach 1: Inline-Block Display

Centered menu items can be achieved by setting the display property of both the navbar and its li elements to inline-block, ensuring they appear side-by-side without any float.

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

Approach 2: Custom Class

Alternatively, applying a custom class, such as "center," can prevent potential conflicts with other page sections.

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

And the corresponding 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;
}

Submenu Alignment Fix

Finally, to realign submenu items to the left, the following CSS is required:

.center .dropdown-menu {
    text-align: left;
}

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