How to center menu options in bootstrap 3

Navigation
2

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

<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 looks 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've 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 image:

    
asked by anonymous 29.06.2016 / 14:54

4 answers

1

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

Simply use css: 

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

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

See if it will work.

    
01.07.2016 / 06:35
4

I gave a little change in css. What I found of error was if your code is the same as the one copied here is missing the closing of the first div. 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, however as the main div is not centralized it ends up playing 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 have helped.

    
01.07.2016 / 05:00
2

I think the best solution and also the simplest one would be to use flex-box! 

#navbar {
  display: flex !important;
  justify-content: center !important;
}
    
07.06.2017 / 19:48
2

An elegant way to solve your issue is to use the incredible power of flexbox. Here is 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>
    
07.06.2017 / 22:03
Get object content without knowing the attribute name Character limit