垂直对齐文字＆amp;图片在浏览器中不一致

Question

我正在尝试垂直对齐表格单元格中的文本和图像元素。我使用的是align="absmiddle"，它适用于IE，但不适用于Chrome。

如何在Chrome和IE中间垂直对齐中间的文字和图片？

以下是代码：

<tr>
    <td height="17" bgcolor="#550000">
        <div align="center">
            <strong><font color="#000000" size="3">Text</font></strong>
            <img src="Image.jpg" alt="US Image" width="30" height="15" border="0" align="absmiddle">
        </div>
    </td>
</tr>​

演示：http://jsfiddle.net/8xTta/

Answer 1

使用absmiddle不仅是common HTML mistake，而且在使用这种方式时也被认为是不好的做法，即您应该始终将样式与内容分开，并使用外部样式表而不是嵌入在内容中的内联样式标记。

要解决此问题并实现跨浏览器兼容性，请替换align:absmiddle;规则并改为使用vertical-align: middle;。

这可能是您感兴趣的reference on vertical alignment。