如何在不使用display：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;
}

Answer 2

将line-height设置为所需的值可以解决此问题，但这不是正确的方法。 这只是一个hack。 正确的方法是使用vertical-align属性（用于menu div中的所有锚点）

.menu a {
  vertical-align: middle;
}

Answer 3

检查这个小提琴。 http://jsfiddle.net/sfz7d/

告诉我它是否适合您。