当内部有图像时，HTML垂直对齐表格单元格的内容答案

【问题标题】：HTML vertically align content of table cell when there's image inside当内部有图像时，HTML垂直对齐表格单元格的内容
【发布时间】：2012-10-22 15:32:54
【问题描述】：

有没有什么方法可以让文本Hello World!垂直对齐到表格单元格的中间而不分成两个单元格？

<table border="1">
    <tr>
        <td valign="middle" style="vertical-align:middle;">
            Hello World! <img src="https://www.google.com/images/srpr/logo3w.png" border="1" />
        </td>
    </tr>
</table>

http://jsfiddle.net/U4Qs4/

【问题讨论】：

应该在图片上面还是下面？

标签： html vertical-alignment valign

【解决方案1】：

您需要垂直对齐图像，而不是 td 元素。

【讨论】：

谢谢。附言为什么对齐单元格内的图像将修复单元格文本对齐是没有意义的......多年来我一直试图弄清楚如何做到这一点。附言img 标签中没有 valign 属性需要使用 style="vertical-align:middle;"
在 Firefox 15 中不起作用，它在 Crome 中起作用，因为浏览器试图修复糟糕的编码错误 :) img 源没有这样的属性：w3schools.com/tags/tag_img.asp
据我所知，图像会改变行高，所以当您向其添加文本时，您需要提及垂直对齐方式
对我有用，我可以参考 W3 基金会网站，但他们的文档很难阅读。再次感谢。

【解决方案2】：

适用于 Chrome FF 和 IE7 ....

<style>
.mid {
    vertical-align:middle
    }
</style>


<table border="1">
    <tr>
        <td class="mid">
            <img src="https://www.google.com/images/srpr/logo3w.png" class="mid" border="1" />Hello World!
        </td>
    </tr>
</table>

【讨论】：