Twitter Bootstrap - center navbar when responsive to two rows - css

Question

I have a navbar with a bunch of dropdowns. When the navbar is on one row (full size screen), I got it to be centered. When the screen size is small, I successfully made it collapse into a button, which is centered. However, when the screen size is medium and the navbar is on two rows, neither row is centered. How do I fix this?
Here is the jsFiddle: http://jsfiddle.net/grzt/US2sS/
You can resize the jsFiddle lower-right frame to see the different screen size results I mentioned above.
HTML:
<nav class="navbar navbar-inverse">
<div class="container-fluid" style="text-align: center;">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigation-navbar-collapse" id="navigation-collapse-btn">
<div id="navigation-collapse-text">Navigation</div>
<span class="sr-only">Toggle navigation</span>
</button>
<div class="collapse navbar-collapse" id="navigation-navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
Some Words <b class="caret"></b>
<ul class="dropdown-menu">
<li>Link</li>
</ul>
</li>
<li class="dropdown">
Some Words <b class="caret"></b>
<ul class="dropdown-menu">
<li>Link</li>
</ul>
</li>
<li class="dropdown">
Some Words <b class="caret"></b>
<ul class="dropdown-menu">
<li>Link</li>
</ul>
</li>
<li class="dropdown">
Some Words <b class="caret"></b>
<ul class="dropdown-menu">
<li>Link</li>
</ul>
</li>
<li class="dropdown">
Some Words <b class="caret"></b>
<ul class="dropdown-menu">
<li>Link</li>
</ul>
</li>
<li class="dropdown">
Some Words <b class="caret"></b>
<ul class="dropdown-menu">
<li>Link</li>
</ul>
</li>
<li class="dropdown">
Some Words <b class="caret"></b>
<ul class="dropdown-menu">
<li>Link</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
CSS:
.navbar-nav {
/*center navbar inner elements*/
display: inline-block;
float: none;
}
.navbar-toggle
{
/*center collapse button*/
float:none;
}

Answer 1

If you want to keep menu in center avoid using float. Check if this helps you.
#media (min-width: 768px) {
.navbar-nav>li {
float: none;
display: inline-block;
}
}