Question

因此，我display:table的用户nav，display:table-row的{{1}}，nav ul的{{1}}和display:table-cell的{{1}}。菜单项仍然不会在垂直中间对齐。有人可以帮忙吗？

＆＃13;

vertical-align:middle

＆＃13;

nav ul li

＆＃13;

Answer 1

从您的陈述菜单项仍然不会在垂直中间对齐。 我认为你希望表格位于页面的中心。

您使用的代码vertical-align:middle;不一样。查看vertical-align或此CSS vertical-align Property 用工作的例子非常巧妙地解释了它。

为了在页面中心对齐，您可以按以下方式运行css

.wrapper {
  display: table;
  text-align: center;
}

.wrapper ul {
  display: table-row;
}

.wrapper ul li {
  padding: 10px;
  display: table-cell;
  vertical-align:middle;
}

以下是JS Fiddle

或者非常简单轻松地用

替换整个代码

<!DOCTYPE html>
<html>
<body>
<table align="center">
  
<tr><td><a href="index.html">Blog</a></td></tr>
    <tr><td><a href="video_screencasts.html">Videos</a></td></tr>
    <tr><td><a href="almanac.html">Almanac</a></td></tr>
    <tr><td><a href="snippets.html">Snippets</a></td></tr>
    <tr><td><a href="forums.html">Forums</a></td></tr>
    <tr><td><a href="shop.html">Shop</a></td></tr>
    <tr><td><a href="lodge.html">Lodge</a></td></tr>
    <tr><td><a href="jobs.html">Jobs</a></td></tr>
</table>
</body>
</html>

垂直对齐：中间和显示：表格问题？

1 个答案: