How to center the contents of a navigation bar in HTML/CSS?

Question

So I've looked for other answers, and found plenty about adjusting the #nav tag to change it to display: inline-block, as well as everything else I've found on similar SO questions, but nothing seems to work. Here's what it sits at now.

.navbar {
  margin-bottom: 50px;
  border-radius: 0;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>MANHammer Studios</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
  <nav class="navbar navbar-inverse">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a>
          </li>
          <li><a href="#">About</a>
          </li>
          <li><a href="#">Gallery</a>
          </li>
          <li><a href="#">Services</a>
          </li>
          <li><a href="#">Tutorials</a>
          </li>
          <li><a href="#">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

Do you have a wireframe/mockup of the layout you're looking to achieve? — Jesse Kernaghan, Jan 12 '17 at 19:01
Possible duplicate of [Center content in responsive bootstrap navbar](http://stackoverflow.com/questions/18777235/center-content-in-responsive-bootstrap-navbar) — Banzay, Jan 12 '17 at 19:16

score 0 · Answer 1 · answered Jan 12 '17 at 19:10

0

.navbar{
    text-align: center;
}

is probably what you want?

answered Jan 12 '17 at 19:10

Przemek Lewandowski

374
1
2
17

I have attempted adding this, and it does not center the navbar's contents; they remain left-aligned. The same applies for trying align-content and align-items. – Michael Alan Nollette Jan 12 '17 at 19:13
Have you checked if bootstrap dont override this? Or with !important flag? – Przemek Lewandowski Jan 12 '17 at 19:25

Syden · Accepted Answer · 2017-01-12T19:18:20.517

0

Add the following CSS:

div#myNavbar.collapse.navbar-collapse {
    text-align: center;
}
ul.nav.navbar-nav {
    display: inline-block;
    float: none;
}

Check working JSFiddle

edited Jan 12 '17 at 19:18

answered Jan 12 '17 at 19:12

Syden

8,425
5
26
45

Perfect, that worked exactly as I needed it to. THANK YOU! – Michael Alan Nollette Jan 12 '17 at 19:16

How to center the contents of a navigation bar in HTML/CSS?

2 Answers2