Centralize o conteúdo na barra de navegação responsiva

221

Estou com problemas para centralizar meu conteúdo na barra de navegação do bootstrap. Estou usando o bootstrap 3. Li várias postagens, mas o CSS ou os métodos usados não funcionarão com o meu código! Estou muito frustrado, então essa é a minha última opção. Qualquer ajuda seria apreciada!

<!DOCTYPE html>
<html>
  <head>
    <title>Navigation</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="css/style.css" rel="stylesheet" media="screen">
  </head>
  <body>
    <div class="container">
      <nav class="navbar navbar-default" role="navigation">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse navbar-ex1-collapse">
          <ul class="nav navbar-nav">
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </nav>
      <h1>Home</h1>

   </div>
     <!--JAVASCRIPT-->
   <script src="js/jquery-1.10.2.min.js"></script>
   <script src="js/bootstrap.min.js"></script>
 </body>
</html>

https://jsfiddle.net/amk07fb3/

css twitter-bootstrap navbar Nick lK
fonte

457

Eu acho que isto é o que você está procurando. Você precisa remover o float: leftda navegação interna para centralizá-lo e torná-lo um bloco embutido.

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

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

http://jsfiddle.net/bdd9U/2/

Editar: se você deseja que esse efeito ocorra apenas quando a navegação não é reduzida, envolva-a na consulta de mídia apropriada.

@media (min-width: 768px) {
    .navbar .navbar-nav {
        display: inline-block;
        float: none;
        vertical-align: top;
    }

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

http://jsfiddle.net/bdd9U/3/

hajpoj
fonte

Se você tiver problemas com espaço extra abaixo dos links (se estiver usando um plano de fundo diferente para links ativos, por exemplo), poderá usar:.navbar .navbar-collapse { line-height: 0px; }

jenniwren

3

Eu recomendarei não jogar com o bootstrap.css original. Em vez disso, crie seu próprio estilo.

Faizan Mubasher

No meu caso, tive que remover o "flex" e substituí-lo por "inline-block", e ele começou a funcionar.

theMayer

É uma solução perfeita.

Renato Lazaro

47

A postagem original estava perguntando como centralizar a barra de navegação recolhida. Para centralizar elementos na barra de navegação normal, tente o seguinte:

.navbar-nav {
    float:none;
    margin:0 auto;
    display: block;
    text-align: center;
}

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

Radu Rascol
fonte

23

Há outra maneira de fazer isso para layouts que não precisam colocar a barra de navegação dentro do contêiner e que não requer nenhuma substituição de CSS ou de Bootstrap.

Simplesmente coloque uma div com a containerclasse Bootstrap ao redor da barra de navegação. Isso centralizará os links dentro da barra de navegação:

<nav class="navbar navbar-default">
  <!-- here's where you put the container tag -->
  <div class="container">

    <div class="navbar-header">
    <!-- header and collapsed icon here -->
    </div>

    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
      <!-- links here -->
      </ul>
    </div>
  </div> <!-- close the container tag -->
</nav> <!-- close the nav tag -->

Se você deseja alinhar o conteúdo do corpo com a barra de navegação central, também coloque esse conteúdo na containertag Bootstrap .

<div class="container">
  <! -- body content here -->
</div>

Nem todo mundo pode usar esse tipo de layout (algumas pessoas precisam aninhar a barra de navegação dentro da container). No entanto, se você puder fazer isso, é uma maneira fácil de colocar os links da barra de navegação e o corpo centralizados.

Você pode ver os resultados nesta página inteira JSFiddle: http://jsfiddle.net/bdd9U/231/embedded/result/

Fonte: http://jsfiddle.net/bdd9U/229/

Eric S. Bullington
fonte

13

Hum, esta solução parece não funcionar mais. Seu exemplo é deixado alinhado agora.

Bjarte Aune Olsen

não funcionou para mim, mas aprecio a simplicidade da sua solução!

Ben Casalino 03/03

12

Este código funcionou para mim

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

Shuhad zaman
fonte

8

Para o Bootstrap 4:

Apenas use

<ul class="navbar-nav mx-auto">

mx-auto fará o trabalho

Hezy Ziv
fonte

8

Atualização 2020 ...

Bootstrap 4

A centralização do conteúdo da Navbar é mais fácil é o Bootstrap 4, e você pode ver muitos cenários de centralização explicados aqui: https://stackoverflow.com/a/20362024/171456

Bootstrap 3

Outro cenário que não parece ter sido respondida ainda está centrando tanto a marca e os links navbar . Aqui está uma solução ..

.navbar .navbar-header,
.navbar-collapse {
    float:none;
    display:inline-block;
    vertical-align: top;
}

@media (max-width: 768px) {
    .navbar-collapse  {
        display: block;
    }
}

http://codeply.com/go/1lrdvNH9GI

Veja também: Bootstrap NavBar com itens alinhados à esquerda, ao centro ou à direita

Zim
fonte

4

do site oficial do bootstrap (e, quase, como Eric S. Bullington disse.

https://getbootstrap.com/components/#navbar-default

o exemplo navbar se parece com:

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
        ...etc

para centralizar a navegação, é o que eu fiz:

<div class="container-fluid" id="nav_center">

css:

@media (min-width:768px) { /* don't break navbar on small screen */
    #nav_center {
        width: 700px /* need to found your width according to your entry*/
    }
}

trabalhe com class = "container" e navbar-direita ou esquerda, e é claro que você pode substituir id por classe. : D

NoZero
fonte

3

Parece que todas essas respostas envolvem CSS personalizado em cima do bootstrap. A resposta que estou fornecendo utiliza apenas bootstrap, então espero que seja usada para aqueles que desejam limitar as personalizações.

Isso foi testado com o Bootstrap V3.3.7

<footer class="navbar-default navbar-fixed-bottom">
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-offset-5 col-xs-2 text-center">
                <p>I am centered text<p>
            </div>
            <div class="col-xs-5"></div>
        </div>
    </div>
</footer>

Tommy May
fonte

2

isso deve funcionar

 .navbar-nav {
    position: absolute;
    left: 50%;
    transform: translatex(-50%);
}

Govan
fonte

1

Use o seguinte html

<link rel="stylesheet" href="app/components/directives/navBar/navBar.scss"/>
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <!-- Collect the nav links, forms, and other content for toggling -->
            <ul class="nav navbar-nav">
                <li><h5><a href="#/">Home</a></h5></li>
                <li>|</li>
                <li><h5><a href="#products">About</a></h5></li>
                <li>|</li>
                <li><h5><a href="#">Contacts</a></h5></li>
                <li>|</li>
                <li><h5><a href="#cart">Cart</a></h5></li>
            </ul>
    </div><!-- /.container-fluid -->
</nav>

E css

.navbar-nav {
  width: 100%;
  text-align: center;
}
.navbar-nav > li {
  float: none;
  display: inline-block;
}
.navbar-default {
  background-color: white;
  border-color: white;
}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus{
  background-color:white;
}

Modifique de acordo com suas necessidades

Alexander Gorelik
fonte

1

A V4 do BootStrap está adicionando Center (justify-content-center) e Right Alignment (justify-content-end) conforme: https://v4-alpha.getbootstrap.com/components/navs/#horizontal-alignment

<ul class="nav justify-content-center">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

O codificador
fonte

Tem certeza de que isso funciona? Eu tentei, mas como meus li's são de largura total, isso não faz diferença

gota

Oi Nuno, estamos usando isso em nosso aplicativo, então sim, definitivamente funciona, é um menu horizontal na parte superior do aplicativo, ainda em uso.

The Coder

Centralize o conteúdo na barra de navegação responsiva

Respostas: