CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
O P
O P

Reputation: 2365

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.

http://jsbin.com/efagoj/99/edit?html,output

<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>
    </div>
  </div>
  <a class="btn btn-navbar pull-right">Right Text</a>
</div>

I want the brand image to stay centered no matter what - even if there are several links on both sides of it.

Upvotes: 0

Views: 1633

Answers (2)

jsea
jsea

Reputation: 4047

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.

http://jsbin.com/efagoj/116/edit

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.

Upvotes: 2

Donovan Charpin
Donovan Charpin

Reputation: 3397

You can remove your <img/> and add this css

.navbar{
  background: url("http://i.imgur.com/XlPrrVD.png") top center no-repeat;
  background-size:100 30px;
}

http://jsbin.com/efagoj/101/

and code http://jsbin.com/efagoj/101/watch?html,css,js,output

if you want keep your code to add link on your <img/>

add .imgCenter on you image and this css

.imgCenter{
  position:absolute;
  left:50%;
  width:100px;
  margin-left:-50px;
}

Upvotes: 0

Related Questions