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设置为所需的值可以解决问题，但这不是正确的方法。这只是一个黑客。正确的方法是使用 vertical-align 属性（对于menu div中的所有锚点）

.menu a {
  vertical-align: middle;
}

Answer 3

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

告诉我它是否适合你。

如何在不使用display：table-cell的情况下垂直居中文本？

3 个答案: