将列表在 div 中垂直居中

发布于 2024-08-20 02:02:15 字数 609 浏览 7 评论 0原文

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

原文

I want my navigation links to be in the middle of the parent div, vertically. How do I do that?

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;
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

沫尐诺 2024-08-27 02:02:15

根据您对其他答案的评论，您希望它们在中间垂直对齐。由于您已经有了固定的高度，因此这应该有效：

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

According to your comment to the other answer, you want them vertically aligned in the middle. Since you have a fixed height already, this should work:

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

回复收藏 0 原文

妄想挽回 2024-08-27 02:02:15

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

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

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

I would just add a 15 pixel padding to the nav div:

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

Also, I would highly suggest ordering your attributes alphabetically (as I've done above) so that people can more easily find the attribute for which they are looking.

回复收藏 0 原文