Center align nav items in Bootstrap nav

Question

I am trying to align my navbar items centrally horizontally but they are aligned to the left.

Can someone offer some help?

This is a Desktop issue - just to be clear, I'm having this issue at desktop level.

Here is my current code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<header class="container">
  <div id="menu" class="navbar navbar-default">
      <div class="navbar-header">
          <button class="btn btn-success navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
              <span class="glyphicon glyphicon-chevron-down"></span>
          </button>
      <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
              <li class="nav active"><a href=".">Home</a>
              </li>
              <li class="nav"><a href="about.html">About</a>
              </li>
              <li class="nav"><a href="contact.html">Contact</a>
              </li>
          </ul>
      </div>
  </div>
</header>

Demo: https://jsfiddle.net/cjoasysz/

So to clarify, you want all of the items when the navbar is on a desktop width (i.e. not using the collapse button) to be placed at the center? — willwolfram18, Sep 28 '16 at 13:49
@Bwolfing That's right. So Home / About / Contact would be in the center of the nav area, not to the left. — michaelmcgurk, Sep 28 '16 at 13:49
Following the logic from that answer you need to add two more rules to work on that fiddle https://jsfiddle.net/urm4xdtf/5/ — DaniP, Sep 28 '16 at 13:59

pleinx · Answer 1 · 2016-09-28T13:46:20.903

1

Just add this in your CSS

ul.nav li {
   text-align: center;
}

I updated your fiddle: https://jsfiddle.net/cjoasysz/1/

edited Sep 28 '16 at 13:46

answered Sep 28 '16 at 13:45

pleinx

616
3
8

Apologies, I mean at Desktop level, not Mobile. My bad, should have detailed this. – michaelmcgurk Sep 28 '16 at 13:45
1

So, for mobile you like left align and desktop centered align? Then you have to add `text-align: left` in you media queries (css) – pleinx Sep 28 '16 at 13:49
I have ran your code here: https://jsfiddle.net/urm4xdtf/2/ and it doesn't center align my nav items :( – michaelmcgurk Sep 28 '16 at 13:51
if you mean to center the complete `` tag just add new line with `ul.nav li a { display: inline-block; }` – pleinx Sep 28 '16 at 13:57

Mohd Abdul Mujib · Accepted Answer · 2016-09-28T13:59:34.387

1

You can use the CSS to align the text to center.

.navbar-nav>li>a {
    text-align: center;
}

Demo

To center the navigation tabs you can use ..

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

Demo 2

edited Sep 28 '16 at 13:59

answered Sep 28 '16 at 13:45

Mohd Abdul Mujib

13,071
8
64
88

1

This doesn't solve the fact that the `float: left` is still operating when the screen width is large enough to not use the collapse button – willwolfram18 Sep 28 '16 at 13:49
Updated my answer. – Mohd Abdul Mujib Sep 28 '16 at 13:57
1

Thank you, @MohdAbdulMujib - made my day! :-D – michaelmcgurk Sep 28 '16 at 13:58

Center align nav items in Bootstrap nav

2 Answers2