使用 flexbox 在导航栏中垂直居中导航栏药丸

Question

我的 CSS 很糟糕，所以我无法将我的 <li>（导航栏药丸）垂直居中用于导航栏。这个导航栏来自 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>

我的导航栏目前看起来像这样：

我也在尝试使用flexbox，因为在浏览解决方案时，使用 flexbox 似乎是一种将导航栏按钮垂直居中的简单方法。

这是我目前尝试过的，但它不起作用 =/

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

Answer 1

将display: flex 设置为<ul class="nav">，而不是项目。
也可以使用align-items: center 进行垂直对齐：

.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