Finally figured this one out - best way is to wrap the nav in a container,
force a width close to your nav list width, and then text-align: center on
the container.
Something like:
.container {
width: 850px;
text-align: center;
}
and
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
...
</ul>
</div>
</div>
</div>
Let me know if you need any help.
On Monday, March 5, 2012 12:57:51 PM UTC-8, Henry Finkelstein wrote:
>
> Hey there,
>
> I'm having a lot of trouble centering the contents of the nav, and I'm not
> sure where I'm going wrong. Any help would be greatly appreciated!
>
> Since it's the .nav element that I want centered, I thought applying
> margin-left and -right would do the trick, but to no avail. Is that
> because it's centering the contents inside .nav? Is there a clean and easy
> way to center the nav elements inside the navbar?
>
> CSS:
> .navbar .nav {
> margin-left: auto;
> margin-right: auto;
> }
>
> HTML:
> <div class="navbar">
> <div class="navbar-inner container">
> <ul class="nav">
> <li class="dropdown">
> <a href="#" class="dropdown-toggle" data-toggle="dropdown">
> A
> <b class="caret"></b>
> </a>
> <ul class="dropdown-menu">
> <li><a href="#">A.1</a></li>
> <li><a href="#">A.2</a></li>
> <li><a href="#">A.3</a></li>
> <li class="divider"></li>
> <li><a href="#">A.4</a></li>
> </ul>
> </li>
> <li class="dropdown">
> <a href="#" class="dropdown-toggle" data-toggle="dropdown">
> B
> <b class="caret"></b>
> </a>
> <ul class="dropdown-menu">
> <li><a href="#">B.1</a></li>
> <li><a href="#">B.2</a></li>
> <li><a href="#">B.3</a></li>
> </ul>
> </li>
> <li><a href="#">C</a></li>
> <li><a href="#">D</a></li>
> <li><a href="#">E</a></li>
> </ul>
> </div>
> </div>
>
>
