How to Align Heading to the center of Navigation?

Question

I have a heading inside a navigation like below I am trying to align the Heading to the center of navigation.

<nav class="navbar navbar-default">
  <h1>My Heading</h1> 
</nav>

When I use the CSS like the below

.navbar{
  min-height: 70px;
  background-color: #e8e8e8;
  text-align: center;
}

it does not align the text inside the navbar to be center instead it aligns to left. I also tried adding CSS for h1. It doesnot work too. What am I missing?.

and you can try aligning your `h1` in the center of `navbar` — Muhammad Usman, Nov 03 '17 at 17:00
Check the specifity order. You might have on your page/css a much important class which aligns the h1 to left. https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity — DanielaB67, Nov 03 '17 at 17:10

score 0 · Answer 1 · answered Nov 03 '17 at 17:01

0

This is similiar to this question: Bootstrap center heading

bootstrap has added three css classes for text align.

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

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

answered Nov 03 '17 at 17:01

Dean

396
3
10

score 0 · Answer 2 · answered Nov 03 '17 at 17:01

0

.navbar h1 {
  text-align: center;
}

or

.navbar h1 {
  text-align: center !important;
}

If your h1 is styled as a block element, it will definitely be aligned center

answered Nov 03 '17 at 17:01

Sergey Sklyar

1,902
1
15
27

score 0 · Answer 3 · answered Nov 03 '17 at 17:03

0

Your example just works fine! However it might be that you need to set the width to the navbar.

.navbar{
  min-height: 70px;
  background-color: #e8e8e8;
  text-align: center;
  width: 100%
}

<nav class="navbar navbar-default">
  <h1>My Heading</h1> 
</nav>

answered Nov 03 '17 at 17:03

Hielke Walinga

2,677
1
17
30

It is working when I test in JSFiddle but not in my angular application. – karthik gorijavolu Nov 03 '17 at 17:06

score 0 · Answer 4 · answered Nov 03 '17 at 17:09

Try this:

nav.navbar.navbar-default h1 {
  text-align: center;
}

or, please add a class to the h1 tag and write css like this:

<nav class="navbar navbar-default">
  <h1 class="heading">My Heading</h1> 
</nav>

nav.navbar.navbar-default h1.heading {
  text-align: center;
}

Tebogo Khanye · Answer 5 · 2017-11-03T17:57:23.230

0

Simply add:

nav > h1
{
   text-align:center !important;
}

Alternatively:

nav > h1
{
    display: inline-block;
    float: none; 
}

edited Nov 03 '17 at 17:57

answered Nov 03 '17 at 17:28

Tebogo Khanye

380
1
7
18

Avoid using `!important` instead make use of css specificity. – bhansa Nov 03 '17 at 17:29
@bhansa, why so? – Tebogo Khanye Nov 03 '17 at 17:34
Doesn't it simply override the existing CSS only for specified classes/tags? – Tebogo Khanye Nov 03 '17 at 17:36
It's fine for this example, but when you have a big application its better to use css selectors properly instead overriding anything. – bhansa Nov 03 '17 at 17:46
Ok, now I understand, thanks, I appreciate the advice. – Tebogo Khanye Nov 03 '17 at 17:50

How to Align Heading to the center of Navigation?

5 Answers5