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

Question

我有:

        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/

我无法添加任何新列或行，格式必须在该单元格内进行。

Answer 1

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