Centralizing menu options in bootstrap 3

Question

I’m trying to leave options a centralized menu created in bootstrap 3, I’ve tried some alternatives, but none solved my problem, I have this snippet of code:

<div class="navbar navbar-default navbar-top">
<div class="container">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <i class="icon-menu-1"></i> </button>
  </div>
  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav navbar-left">
      <li><a href="index.php">INÍCIO</a></li>
      <li><a href="empresa.php">QUEM SOMOS</a></li>
      <li><a href="produtos.php">PRODUTOS E SERVIÇOS</a></li>
      <li><a href="livraria.php">LIVRARIA TÉCNICA</a></li>
      <li><a href="noticias.php">NOTÍCIAS</a></li>
      <li><a href="representantes.php">REPRESENTATES</a></li>
      <li><a href="contato.php">CONTATO</a></li>
    </ul>
  </div>
</div>

My CSS is like this:

.navbar-collapse {
  max-height: 340px;
  padding-right: 15px;
  padding-left: 15px;
  overflow-x: visible;
  border-top: 1px solid transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  -webkit-overflow-scrolling: touch;
}

.nav {
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.navbar-nav {
  margin: 7.5px -15px;
}



.navbar-nav > li > a {
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 20px;
}

Some alternatives I tried:

.navbar-nav {
    width: 100%;
    text-align: center;
    > li {
      float: none;
      display: inline-block;
    }

And this:

.navbar .navbar-nav {
    display: inline-block;
    float: none;
}

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

What I have today can be seen in this picture:

Answer 1

I made a small change to css. What I found wrong was if your code is the same as the one you copied here is missing the first div lock. What you forgot was to centralize the main div with margin:0 auto, if you repair you managed to centralize them on your first try, but as the main div is not centered end up playing to the left as default.

.container {
    width: 90%;
    margin: 0 auto;
}

li {
    margin: 0.5%;
    background: #092962;
    width: 12.985714%;
    text-align: center;
    display: inline-block;
}

I hope I’ve helped.

Answer 2

The solution you used is correct, you just need to add the property !important

Simply use the css:

.navbar .navbar-nav {
display: inline-block;
float: none !important;
}

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

See if it works.

Answer 3

I believe that the best solution and also the simplest, would be to use the flex-box!

#navbar {
  display: flex !important;
  justify-content: center !important;
}

Answer 4

A very elegant way out to solve your question is to utilize the incredible power of flexbox. Below follows a basic example :

nav ul {
   display: flex;
   width: 100%;
}

li {
  flex-grow: 1;
}

<nav>
  <ul>
    <li><a href="#" title="Home">Home</a></li>
    <li><a href="#" title="Blog">Blog</a></li>
    <li><a href="#" title="Work">Work</a></li>
    <li><a href="#" title="Resources">Resources</a></li>
    <li><a href="#" title="Meta">Meta</a></li>
  </ul>
</nav>

Answer 5

Just use:

.navbar .navbar-nav {
 display: inline-flex;
}