I'm using Twitter's Bootstrap 3.0 and can't for the life of me figure out how to center the brand image in the navbar.
<div class="navbar navbar-fixed-top" style="background-color: orange;">
<a class="btn btn-navbar pull-left">Left Text</a>
<a class="btn btn-navbar pull-left">Left Text 2</a>
<div class="container-fluid" style="text-align: center;">
<a class="brand" href="#" style="margin:0 auto; float: none;">
<img src="http://i.imgur.com/XlPrrVD.png" style="height:30px;">
<a class="btn btn-navbar pull-right">Right Text</a>
I think this solution may be more acceptable than taking it out of the flow of the page. So if you have two floating containers, one on the left and one on the right, both of equal width, then the
div in the center should be positioned correctly for centering.
This however requires enough width on the page to look right. Plus you'd have to make sure both the left and right are always the same width if the navbar is ever changed... So the position absolute with @media queries might be better for you.