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