表格单元垂直对齐问题

Question

我为我的一个桌子的单元格设置了float。但现在我无法改变它内容的垂直对齐方式。默认情况下，它会将内容移动到div的顶部。我尝试valign: middle，vertical-align: middle但没有成功。结果如下：

使用float: left

没有float: left

如何使用float将垂直单元格的内容对齐？ 标记看起来像那样

<td id="top_logo">
    <a href="index.php">
        <img src="core/design/img/logo.png" style="height:40px; padding:3px;"/>
    </a>
</td>
<td id="name" valign="middle"><?php include "core/code/includes/pr.name.php";?></td>

Answer 1

我不知道这是否会有所帮助（我现在已经离开了基于表格的布局），但是要使用直接div解决类似问题，您可以使用line-height执行相同操作规则。

<div id="tableRow">
    <div id="leftCell"><img src="mylogo" /></div>
    <div id="middleCell">&nbsp;</div>
    <div id="rightCell">User Name Here</div>
</div>

您的CSS将被设置为设置宽度/高度等，我猜您不需要表格，而对于“rightCell”，您将行高设置为与行高相同：

#rightCell
{
    height: 30px;
    line-height: 30px;
}

然后发生的是文本在行间距中垂直居中，因为它与高度相同，也给出了它在元素中心的印象。

就像我说的那样，我从来没有在桌面上试过这个，但是任何现代浏览器都应该允许你使用以下内容将显示属性更改为block或inline-block：

display: block;

根据需要更改任何其他类型的块。这会将单元格的显示类型设置为div（或跨度或其他元素），但我不知道它会对表格产生什么影响。

另请注意，我不是在处理旧版浏览器，就像IE6一样，如果需要支持，可能需要为旧浏览器制作一些黑客。