You can center your nav menu by setting your menu items to display:inline-block
instead of float:left
like so:
.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;
}
Though i suggest you create your own class to target your navbar menu that you wish to center, this way you won't bother the bootstrap default values and mess with other nav sections you may have in your page. You can do it like so:
Notice the .center class in the navbar container
<div class="navbar navbar-fixed-top center">
<div class="navbar-inner">
....
</div>
</div>
And then you can target the .center
class like so:
.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;
}
Demo: http://jsfiddle.net/C7LWm/show/
Edit: Forgot to realign the submenu items to the left, this is the fix:
CSS
.center .dropdown-menu {
text-align: left;
}
Demo: http://jsfiddle.net/C7LWm/1/show/
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…