css - リストをdivの垂直方向の中央に配置します

Question

ナビゲーションリンクを親divの中央に垂直に配置したいと思います。それ、どうやったら出来るの？

HTML：

<div id="nav">
    <ul>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
    </ul>
</div>

CSS：

#nav {
  background: #8DC3E9;
  width: 100%;
  height: 70px;
  border-bottom: 2px solid #4C88BE;
}

#nav ul {
  margin: 0;
}

#nav ul li {
  display: inline;
  font-size: 40px;
}

Answer 1

他の答えへのあなたのコメントによると、あなたはそれらを真ん中に垂直に並べたいと思います。あなたはすでに固定された高さを持っているので、これはうまくいくはずです：

#nav ul {
    margin: 0;
    vertical-align: middle;
    line-height: 70px;
}

Answer 2

navdivに15ピクセルのパディングを追加するだけです。

#nav {
  background: #8DC3E9;
  border-bottom: 2px solid #4C88BE;
  height: 70px;
  padding-bottom: 15px;
  padding-top: 15px;
  width: 100%;
}

また、（上記で行ったように）属性をアルファベット順に並べて、探している属性を他の人が簡単に見つけられるようにすることを強くお勧めします。

Answer 3

vertical-align: middle;ブラウザ互換で使用してください。