Unable to center website brand in navbar?

Question

I am trying to center my website's brand in the navbar using bootstrap 3.0 and have been unsuccessful in doing so. I have tried both of these solutions: twitter bootstrap -- center brand in nav bar Bootstrap: center some navbar items And neither has worked for me. Here is my current code:

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <a class="navbar-brand" href="index.php">My Website's Brand</a>
    </div>
  </div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

I have tried text-align: center and auto margins and nothing has worked. Any ideas? EDIT: JSFiddle: http://jsfiddle.net/3Kqn8/

Twitter Bootstrap can be a difficult thing to manipulate at times. Usually with a library like that, you mostly have to take what you can get. +1 because I couldn't find a reasonable solution quickly. — bozdoz, Jan 25 '14 at 03:02
@AttilaTheFun bozdoz's answer works when you add width:100%; to the .navbar-header — dev7, Jan 25 '14 at 03:14
@Yani You're right. That's another solution, but I decided to set float to none instead. — bozdoz, Jan 25 '14 at 03:17

CRABOLO · Answer 1 · 2014-01-25T03:11:55.463

1

.navbar-header {
    text-align: center;
 }

Demo http://jsfiddle.net/ujgdL/

EDIT: Bootstrap update.

.navbar-header { text-align: center;  }
.navbar-brand { display: inline-block; float: none; }

working example http://jsfiddle.net/3Kqn8/1/

edited Jan 25 '14 at 03:11

answered Jan 25 '14 at 02:51

CRABOLO

8,605
39
41
68

1

That doesn't use Bootstrap and doesn't work with it. – AttilaTheFun Jan 25 '14 at 02:57
Missing width:100%; at the header – dev7 Jan 25 '14 at 03:13
@AlienArrays Works now, but your solution suffers from the same thing mine did: you need to set navbar-header to float none as well, for all screen sizes. – bozdoz Jan 25 '14 at 03:15

bozdoz · Accepted Answer · 2014-01-25T03:13:59.183

1

You have to do a couple of overwrites for the bootstrap classes, namely the following:

.navbar-header {
    padding-top:15px;
    text-align:center;
    float:none;
}
.navbar-brand {
    float:none;
}

.navbar-brand is floated left, most importantly. So you need to set float to none. navbar-header needs text-align:center to center, and padding-top:15px to adjust for the padding styling that is removed when you remove the float. Probably some better ways to do this, but this is the most basic solution.

See the demo: http://jsfiddle.net/bozdoz/KDsJ8/

Update

You also need to set .navbar-header to float:none since on different screen sizes it will float left. :P

Fiddle updated.

edited Jan 25 '14 at 03:13

answered Jan 25 '14 at 03:01

bozdoz

12,550
7
67
96

:( In the jsfiddle it is still left justified. – AttilaTheFun Jan 25 '14 at 03:08
@AttilaTheFun Ha! You're right! At least, sometimes you're right. Bootstrap has a bunch of media queries to change styling for different browser sizes. Let me adjust. – bozdoz Jan 25 '14 at 03:11
@AttilaTheFun Fixed. Sorry about that. Didn't notice. – bozdoz Jan 25 '14 at 03:14
bozdoz, thank you so much! It works now! I marked yours as correct and upvoted it. – AttilaTheFun Jan 25 '14 at 03:16

score 0 · Answer 3 · answered Jan 25 '14 at 03:53

I also have another solution below:

.navbar-header {
    text-align:center; // Align center will work after we clear the "Float" in ".navbar-brand"
    line-height: 50px; // To make our text to vertical align to middle;
}
.navbar-brand {
    float: none; // Clear the float for align the text
    display: block; // To Make it click on the hold box
}

Unable to center website brand in navbar?

3 Answers3

Update