Центрирование пиктограмм navbar по вертикали внутри navbar с использованием flexbox

Question

Ужасно в CSS, поэтому у меня возникают проблемы с центрированием моего <li> (navbar pills) по вертикали для моего навигатора. Это Navbar от Twitter Bootstrap

Вот 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> 

Мой Navbar в настоящее время выглядит следующим образом:

Я пытаюсь использовать 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

Для вертикального выравнивания его, установить высоту строки для элементов списка, который равен высоте NavBar и снимите верхнюю и нижнее заполнение. Он не будет нуждаться в Flexbox вообще :)

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

Bootply