2

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

3 回答 3

1

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

#nav ul {
    margin: 0;
    vertical-align: middle;
    line-height: 70px;
}
于 2010-01-30T22:25:37.977 回答
0

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

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

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

于 2010-01-30T22:25:30.720 回答
0

使用vertical-align: middle;它与浏览器兼容。

于 2010-01-30T22:59:24.463 回答