How to center text next to a responsive image in Bootstrap3 - css

Question

I'm using the Boostrap's navbar, inside which there is an image brand (responsive) and some text (menu items). I would like to center the text within the div, but I don't know how: if I center the text in the CSS, there is more space between the left corner of the monitor and the "Home" and and less space between the last "Link" in the right and the right corner in the monitor. It's as if my code takes the div size, subtracts the image size and center the text in the remaining space.
I thought about putting a negative left margin, but because the image is responsive I don't know what value to give.
Can you help me?
http://jsfiddle.net/a001dxn6/2/
HTML
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#"><img src="official_logo.png" /></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Home <span class="sr-only">(current)</span></li>
<li class="dropdown">
Specialità <span class="caret"></span>
<ul class="dropdown-menu">
<li>
</li>
<li>La pizza napoletana</li>
<li>Le specialità della casa</li>
</ul>
</li>
<li>Menu</li>
<li>Eventi</li>
<li>Gallery</li>
<li>Contatti</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
CSS
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar-default {
background-color: transparent;
border-color: darkorange;
text-align: center;
}
.navbar-brand > img {
max-height: 100%;
max-width: 100%;
}

Answer 1

[fixed] Just add CSS: .navbar-brand { position: fixed; left: 1vw; }

Answer 2

can't really test with the fiddle, since there's no image.
have you tried removing text-aling: center from .navbar classes
and adding:
.dropdown, .dropdown-menu{
text-align: center;
}
? let me know if it works.