bootstrap導航欄中心垂直水平？

Question

是否可以垂直和水平居中放置導航欄？

/** 
 
* Logo. 
 
*/ 
 
.button-logo { 
 
    font-family: 'Monoton', cursive; 
 
    font-weight:normal; 
 
    font-size:40px; 
 
    font-weight: 300; 
 
    line-height: 40px; 
 
    letter-spacing: 1px; 
 
} 
 

 
.button-logo:hover { 
 
    text-decoration: none; 
 
} 
 

 
.button-logo span { 
 
    display: block; 
 
    clear:both; 
 
    color: #000; 
 
} 
 

 
/** 
 
* Centerise the logo. 
 
*/ 
 
.navbar-header { 
 
    float: left; 
 
    text-align: center; 
 
    width: 100%; 
 
} 
 

 
.navbar-brand { 
 
    float:none; 
 
} 
 

 
/** 
 
* Centerise the navbar. 
 
*/ 
 
.navbar .navbar-nav { 
 
    display: inline-block; 
 
    float: none; 
 
} 
 

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

 
/** 
 
* Remove default background, radius, etc. 
 
*/ 
 
.navbar { 
 
    -webkit-border-radius: 0; 
 
    -moz-border-radius: 0; 
 
    border-radius: 0; 
 

 
    border: 0; 
 
    background: none; 
 
    box-shadow: none; 
 
    margin-bottom: 0; 
 
} 
 

 
.navbar-default .navbar-nav > li > a { 
 
    font-family: 'Monoton', cursive; 
 
    font-size: 25px; 
 
    letter-spacing: 2px; 
 
    color: #000; 
 
    color: rgba(0, 0, 0, 0.5); 
 
    padding-bottom: 0 !important; 
 
} 
 

 
.navbar-default .navbar-nav > li > a:hover { 
 
    color: #000; 
 
} 
 

 
.navbar-default .navbar-nav > .active > a, 
 
.navbar-default .navbar-nav > .active > a:hover, 
 
.navbar-default .navbar-nav > .active > a:focus { 
 
    background: none; 
 
    background: none; 
 
    box-shadow: none; 
 
    color: #000; 
 
}

<!-- Static navbar --> 
 
<nav class="navbar navbar-default navbar-fixed-top"> 
 
    <div class="container-fluid"> 
 

 
     <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle collapsed" data-toggle="offcanvas" data-target=".navmenu" data-canvas="body"> 
 
      <span class="sr-only">Toggle navigation</span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      </button> 
 
      <a class="navbar-brand button-logo" href="#"> 
 
       <span>brand</span> 
 
       <span>brand</span> 
 
       <span>brand</span> 
 
      </a> 
 
     </div> 
 

 
     <div id="navbar" class="navbar-collapse collapse"> 
 

 
      <!-- menu-box --> 
 
      <div class="menu-box"> 
 
       <ul class="nav navbar-nav"> 
 
        <li class="active"><a href="home.html">Home</a></li> 
 
        <li><a href="about.html">About</a></li> 
 
        <li><a href="contact.html">Contact</a></li> 
 
       </ul> 
 
      </div> 
 
      <!-- menu-box --> 
 

 
     </div><!--/.nav-collapse --> 
 
    </div><!--/.container-fluid --> 
 
</nav>

但這只是居中導航欄水平不垂直。

任何想法？

jsfiddle

Answer 1

如果IGOT你的問題正確：

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

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

<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> 
 

 
</div>

[更新]
以上是用於水平中心;如果你希望它是垂直居中用途：

top:50%; 

在你想讓它垂直居中的每個元素中。

Answer 2

把你的導航欄在屏幕的中心，你可以簡單地添加

nav { 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    -webkit-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%); 
} 

https://jsfiddle.net/anpvtaxu/1/