O P O P - 1 year ago 85
HTML Question

Center brand in navbar

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="navbar-inner">
<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 want the brand image to stay centered no matter what - even if there are several links on both sides of it.

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download