Alle Inhalte der Bootstrap-Navigationsleiste zentrieren?

Question

Ich habe das Logo zentriert ist, wie Ich mag würde, wollen aber die nav Links als auch zentriert werden (neben Logo auf beiden Seiten)

, was ich habe, so weit:

.navbar-brand { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100px; 
 
    left: 0; 
 
    top: 0; 
 
    text-align: center; 
 
    margin: auto; 
 
} 
 
.navbar-toggle { 
 
    z-index: 3; 
 
} 
 
.navbar-left { 
 
    float: none; 
 
    text-align: right; 
 
} 
 
.navbar-right { 
 
    float: none; 
 
    text-align: left; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<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-collapse-1"> 
 
     <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
    </button> 
 

 
    </div> 
 
    <a class="navbar-brand" href="#"> 
 
    <div id="logo-container"> 
 
     <img class="circle-img" id="logo" src="logo.jpg"> 
 
    </div> 
 
    </a> 
 
    <!-- Collect the nav links, forms, and other content for toggling --> 
 
    <div class="collapse navbar-collapse" id="navbar-collapse-1"> 
 

 
    <ul class="nav navbar-nav navbar-left"> 
 
     <li><a href="#"><h1>Link</h1></a> 
 
     </li> 
 
     <li><a href="#"><h1>Link</h1></a> 
 
     </li> 
 
    </ul> 
 
    <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="#"><h1>Link</h1></a> 
 
     </li> 
 
     <li><a href="#"><h1>Link</h1></a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
    <!-- /.navbar-collapse --> 
 
</nav>

Erhalten Sie nicht, warum es nicht mein gewünschtes Layout nachgibt ... auch versucht, eine div um das ganze navbar zu wickeln und auszurichten, die auch nicht funktionierte.

Answer 1

Sie müssen den float Wert außer Kraft zu setzen none sein, dann müssen Sie die text-center Klasse in den Behälter hinzufügen, finden Sie dies für ein Beispiel:

.navbar-brand { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100px; 
 
    left: 0; 
 
    top: 0; 
 
    text-align: center; 
 
    margin: auto; 
 
} 
 
.navbar-toggle { 
 
    z-index: 3; 
 
} 
 
.nav.navbar-nav { 
 
    float: none !important; 
 
    display: inline-block; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<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-collapse-1"> 
 
     <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
    </button> 
 

 
    </div> 
 
    <a class="navbar-brand" href="#"> 
 
    <div id="logo-container"> 
 
     <img class="circle-img" id="logo" src="logo.jpg"> 
 
    </div> 
 
    </a> 
 
    <!-- Collect the nav links, forms, and other content for toggling --> 
 
    <div class="collapse navbar-collapse text-center" id="navbar-collapse-1"> 
 

 
    <ul class="nav navbar-nav"> 
 
     <li><a href="#"><h1>Link</h1></a> 
 
     </li> 
 
     <li><a href="#"><h1>Link</h1></a> 
 
     </li> 
 
    </ul> 
 
    <ul class="nav navbar-nav"> 
 
     <li><a href="#"><h1>Link</h1></a> 
 
     </li> 
 
     <li><a href="#"><h1>Link</h1></a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
    <!-- /.navbar-collapse --> 
 
</nav>