Html 在表格单元格中垂直对齐图像和文本区域

我所拥有的：

        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>

不知何故，图像没有垂直对齐，即使我在单元格的样式上放置了一个

垂直对齐：middle

。相反，文本区域在中心正确对齐

JSFiddle：

---

我无法添加任何新的列或行，格式必须与该单元格一致

将

垂直对齐：中间

放在文本区域

就行了！但为什么默认情况下它没有正确对齐？单元格的

vertical align:middle

是否应该在图像和文本区域中工作？为什么需要在文本区域上这样做，即使它以前正确居中了？我希望我有答案@Bob，我和你一样惊讶：）