Suppose we have the following markup for navigation bar using Twitter Bootstrap 2.0.
<div class="navbar navbar-fixed-top">
<div class="navbar-inner pull-center">
<ul class="nav">
<li class="active"><a href="#">HOME</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
</div>
</div>
What is the best way to center .nav
inside navbar-inner
?
I only came up with adding my own CSS styles:
@media (min-width: 980px) {
.pull-center {
text-align: center;
}
.pull-center > .nav {
float:none;
display:inline-block;
*display: inline; *zoom: 1;
height: 32px;
}
}
Override the width of the container within the navbar from auto
to 960px
.
.navbar-inner .container {width:960px;}