表格单元格垂直对齐问题

Question

我已经为我的表格的一个单元格设置了浮点数。但现在我无法更改其内容的垂直对齐方式。默认情况下，它将内容移动到div 的顶部。我试过valign: middle、vertical-align: middle 没有成功。结果如下：

与float: left

没有float: left

如何将单元格的内容与浮动垂直对齐？ 标记看起来像这样

<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

我不知道这是否会有所帮助（我现在已经放弃了基于表格的布局），但要使用直接 divs 解决类似问题，您可以使用 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 这样的旧浏览器，如果需要支持，您可能需要对旧浏览器进行一些修改。