How to Center Brand/Image in Navbar

Question

I've been struggling all morning with this little thing. I try to center the .navbar-brand to be in the middle of the whole navigation bar with Bootstrap 3.

Could someone solve my mystery?

CODE:

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container-fluid">
        <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="#"><img src="img/logo.png" alt=" "/></a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="add/">Add your Channel</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
</nav>

A preview: GTA5CH.AT/twitch

I'd like the logo in the middle/center of the navbar, how to?

Solution 1

Assuming you want to keep the menu options left aligned, you can accomplish this using the following:

.navbar-header{
   left: 50%;
   position: relative;
   transform: translateX(-50%);
}

Solution 2

.navbar-brand{
margin:0 auto;
 left: 50%;
 position: relative;
transform: translateX(-50%);
}

Fiddle

http://jsfiddle.net/DTcHh/2027/