Center content(logo) in Bootsrap Navbar - html

Question

I'm trying to center my logo in boostrap navbar.
I've been searching numerous ways and I found some that worked for me but the center content would cover all of the navbar (unable to click on other links).
So I wrote my own code. Pull left and right are working with no problems, but my center wont center!
Here are my codes.
(I've set the background color to be red on my center content so I have an idea of it's size and area)
The HTML
<nav class="navbar navbar-default" role="navigation">
<div class="navbar navbar-fixed-top">
<!--LEFT OF NAVBAR-->
<div class="navbar-header pull-left">
<a class="navbar-brand" href="#">
<span class="glyphicon glyphicon-align-left"></span>
</a>
</div>
<!--CENTER OF NAVBAR-->
<div class="navbar-header center">
<a class="navbar-brand" style="background:red;" href="#">Center</a>
</div>
<!--RIGHT OF NAVBAR-->
<div class="navbar-header pull-right">
<a class="navbar-brand" href="#" style="font-size:1em;">Sign In</a>
</div>
</div>
</nav>
The CSS
.center {
display:inline-block;
float:none;
margin-left:auto;
margin-right:auto;
text-align:center;
}
Here is my jsfiddle.
http://jsfiddle.net/ew64yt63/

Answer 1

You could add text-align:center to .navbar
Demo Fiddle
.navbar {
text-align:center;
}
Note that you may then need to change the text alignment for child elements.
Alternatively, you can offset and transform the element, e.g:
Demo Fiddle
.center {
display:inline-block;
position:relative;
left:50%;
transform:translateX(-100%);
}