垂直对齐表格单元格中的图像和文本区域答案

【问题标题】：Vertically align image and textarea in a table cell垂直对齐表格单元格中的图像和文本区域
【发布时间】：2015-07-01 19:54:08
【问题描述】：

我有什么：

        XXX
        XXX
Google  XXX

我想要什么：

       XXX
Google XXX
       XXX

我尝试了什么：

<table border="4">
<tr>
<td style="vertical-align: middle; height: 400px">
    <img style="vertical-align: middle;" src="http://www.google.se/images/google_80wht.gif" alt="Google logo">
    <textarea style="height: 200px; display: inline-block"></textarea>
</td>
</tr>
</table>

不知何故，即使我在单元格的样式上添加了vertical-align: middle，图像也没有垂直对齐。文本区域反而在中心正确对齐。

JSFiddle：https://jsfiddle.net/uydmjgby/

我无法添加任何新的列或行，格式必须出现在该单元格中。

【问题讨论】：

标签： html css

【解决方案1】：

将vertical-align: middle放在文本区域https://jsfiddle.net/uydmjgby/1/

【讨论】：

有效！但是为什么默认情况下它没有正确对齐？单元格的vertical-align: middle 不应该已经在图像和文本区域上工作了吗？为什么即使之前正确居中，也需要在 textarea 上执行此操作？
我希望我能得到答案@Bob，我和你一样惊讶:)