michaelmcgurk michaelmcgurk - 2 months ago 14
CSS Question

Center align nav items in Bootstrap nav

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/

Answer

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