在 div 中垂直居中列表答案

【问题标题】：Center a list vertically in a div在 div 中垂直居中列表
【发布时间】：2011-01-11 07:08:55
【问题描述】：

我希望我的导航链接垂直位于父 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;
}

【问题讨论】：

标签： css list vertical-alignment alignment

【解决方案1】：

根据您对另一个答案的评论，您希望它们在中间垂直对齐。由于您已经有一个固定的高度，这应该可以工作：

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

【讨论】：

我几乎无法让vertical-align 属性在所有（或任何）浏览器中正常工作。关于如何使用它的任何提示？
@Topher - 它适用于 Chrome、FF 和 IE 8（我测试过的浏览器）。 @Lance - 谢谢。 :)
我一直在使用它。重要的是要意识到它用于更改元素子元素的垂直对齐方式，而不是您设置它的元素。因此，它非常适合
- 元素。
行高：70px；如果他没有短链接名称，例如：非常短的链接名称 omg，它将被 **ked up。不要使用 line-height 垂直对齐元素！
Ermm vertical-align 适用于元素本身，而不是其子元素

【解决方案2】：

我只想在导航 div 中添加一个 15 像素的填充：

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

另外，我强烈建议您按字母顺序排列您的属性（正如我在上面所做的那样），以便人们可以更轻松地找到他们正在寻找的属性。

【讨论】：

【解决方案3】：

使用vertical-align: middle;是浏览器兼容的。

【讨论】：