html - 如何在不使用显示 : table-cell? 的情况下使文本垂直居中

Question

我试图让菜单出现在 30px 行的中间，但问题是我无法将它从顶部移动，除非我使用 display: table-cell。

这里有什么问题吗？

样式表文件:

div.menu
{
    width: 600; 
    height: 30px; 
    border: 1px solid black; 
    margin: 0px auto; 
    text-align: center; 
    vertical-align: bottom
}

我的 html 文件中的菜单代码:

<div class="space"></div>
<div class="menu">
    <a href="index.html">Home</a> 
    <a href="index.html">Home</a> 
    <a href="index.html">Home</a> 
    <a href="index.html">Home</a> 
    <a href="index.html">Home</a> 
</div>
<div class="space"></div>

Answer 1

line-height: 100px; 设置菜单行的高度。但是在水平维度上要保持足够的空间，否则你会看到疯狂的景色。期待 min-width、width 或 overflow-x 规则。

div.menu
{
    width: 600px; 
    /* Use line-height instead of height */
    line-height: 30px;
    border: 1px solid black; 
    margin: 0px auto;
    text-align: center;
}

div.menu a {
    vertical-align: middle;
}