使用flexbox在導航欄內垂直定位導航欄藥片

Question

我在CSS中很糟糕，所以我無法垂直爲我的導航欄居中放置我的<li>（導航欄藥片）。這導航欄是從Twitter的引導

這裏是我的導航欄的HTML：

<div class="container"> 
    <nav class="navbar navbar-default navbar-fixed-top"> 
     <ul id="nav_pills" class="nav nav-pills" role="tablist"> 
     <li role="presentation"> 
      <a href="/">About</a> 
     </li> 
     <li role="presentation"> 
      <a href="/gallery">Gallery</a> 
     </li> 
     <li role="presentation"> 
      <a href="/news">News</a> 
     </li> 
     <li role="presentation"> 
      <a href="#history">History</a> 
     </li> 
     <li role="presentation"> 
      <a href="#contact">Contact</a> 
     </li> 
     </ul> 
    </nav> 
    </div> 

我的導航欄目前看起來像這樣：

我想使用flexbox以及因在瀏覽解決方案時，使用flexbox似乎是一種簡單的方式來垂直居中我的導航欄按鈕。

這是我目前試過，但它沒有工作=/

.nav li { 
    display: flex; 
    flex-direction: row; 
    align-items: baseline; 
} 

Answer 1

設置display: flex爲<ul class="nav">，而不是項目。
還可以使用align-items: center垂直aligment：

.nav { 
 
    height: 70px; 
 
    
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <nav class="navbar navbar-default navbar-fixed-top"> 
 
     <ul id="nav_pills" class="nav nav-pills" role="tablist"> 
 
     <li role="presentation"> 
 
      <a href="/">About</a> 
 
     </li> 
 
     <li role="presentation"> 
 
      <a href="/gallery">Gallery</a> 
 
     </li> 
 
     <li role="presentation"> 
 
      <a href="/news">News</a> 
 
     </li> 
 
     <li role="presentation"> 
 
      <a href="#history">History</a> 
 
     </li> 
 
     <li role="presentation"> 
 
      <a href="#contact">Contact</a> 
 
     </li> 
 
     </ul> 
 
    </nav> 
 
    </div>

Answer 2

要垂直對齊，設置列表元素線高度等於導航欄的高度並卸下前和底部填充。它不會需要Flexbox在所有:)

.nav > li > a { 
    display: block; 
    line-height: 50px; // Add 
    padding: 0 15px; // Modify 
    position: relative; 
} 

Bootply