Centering menu items with boostrap navbar - css

Question

I have a simple sticky navbar that I am trying to put menu items on the left, center and right side. I found the bootstrap documentation with the navbar-right and navbar-left. Both of those work great, however if I want something to be in the middle I can't find a term/variable in the bootstrap library that does that. I have also tried adding align="center" to the li and a tags. Is there something specific I can call to center menu items in a bootstrap nav, or do I have to edit in manually with css align?
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"> pushed left by default? </a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar" align="center">
<li class="active">pushed left by default?</li>
<li>center this part </li>
<li>and this too </li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>right </li>
<li> right</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>

Answer 1

I posted this link as a duplicate - Center content in responsive bootstrap navbar, but realized the answer does not work correctly with navbar-right.
Try creating/adding a navbar-center class on the navbar-nav that you want centered.
<ul class="nav navbar-nav navbar-center" align="center">
<li class="active">pushed left by default?</li>
<li>center this part </li>
<li>and this too </li>
</ul>
Then add the following CSS:
.navbar-center {
display: inline-block;
float: none;
}
.navbar .navbar-collapse {
text-align: center;
}
JSFiddle Here