I am facing an issue with my navbar that has dropdowns. When the navbar is on a single row at full screen size, I have managed to center it. However, when the screen size is reduced and the navbar expands to two rows, neither row appears centered. How can this be resolved?
For reference, here is the jsFiddle link: http://jsfiddle.net/grzt/US2sS/
Feel free to adjust the frame size in the lower-right corner of the jsFiddle to see the different behavior based on screen size.
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">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" style="padding-left: 0;">Some Words <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Link</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Some Words <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Link</a></li>
</ul>
</li>
(Continues for more dropdown elements)
</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;
}