Nav bar header is not coming in the center

Question

I wanted my heading should be in the center of the navbar. I have tried some code but that is not working.

.navbar img {
  float: left;
  width: 80px;
  height: 80px;
  position: relative;
  top: -12px;
}

.navbar h1 {
  top: 18px;
  font-size: 30px;
  color: brown;
  text-align: center;
}

.navbar {
  min-height: 80px;
}

<nav class="navbar navbar-default header">
  <div class="container-fluid">
    <div class="navbar-header">

      <h1>My heading</h1>
    </div>
  </div>
</nav>

I have referred this link also: How to center align text in navigation bar of website in CSS?

There they have mentioned it should be in text-align: center. But I have included already my script. Any input, please?

possible duplicate https://stackoverflow.com/questions/43497560/center-bootstrap-navbar-title — Amit, Feb 28 '20 at 11:25
@GBWDev is right. may be your other css files are affecting it — Amit, Feb 28 '20 at 11:27
Your other css files affects the style of the `h1`. It has `margin-top: 20px` and `marginbottom: 10px` so it's not in the center. — Omri Attiya, Feb 28 '20 at 11:33

score 0 · Answer 1 · answered Feb 28 '20 at 11:24

It is in the center...? Perhaps its your other CSS file affecting it.

.navbar img {
  float: left;
  width: 80px;
  height: 80px;
  position: relative;
  top: -12px;
}

.navbar h1 {
  top: 18px;
  font-size: 30px;
  color: brown;
  text-align: center;
}

.navbar {
  min-height: 80px;
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Abel|Open+Sans:400,600" rel="stylesheet">


<nav class="navbar navbar-default header">
  <div class="container-fluid">
    <div class="navbar-header">

      <h1>My heading</h1>
    </div>
  </div>
</nav>

score 0 · Accepted Answer · answered Feb 28 '20 at 11:27

Your navbar-header isn't taking up the full width because it has a float: left applied to it by default from Bootstrap. If you add a width: 100% property or a float: none property, you should see it center in the navbar.

.navbar-header {
  width: 100%;
}

OR

.navbar-header {
  float: none;
}

Nav bar header is not coming in the center

2 Answers2