在表格单元格中将文本对齐到顶部

Question

我正在尝试使我的文本与旁边单元格中图像的顶部对齐。 垂直对齐的顶部似乎不起作用？ 我认为目前它正在尝试相对于其他单元格居中。 也许有更好的方法可以用浮子或其他东西做到这一点？

这是CSS：

table#body1 {
    padding: 0px;
    vertical-align: top;
    margin-bottom: 10px;
    margin-top: 5px;
}
td#images { 
    width: 30%;
}
td#text {
    width: 70%;
    padding-left: 15px;
    text-align: justify;
    vertical-align: top;
}

和HTML ：（如果有区别，所有div都是内联块元素）

<table id="body1">
<tr>

<td id="images"><img class="halfimg1" src="titania2.jpg" alt="Queen Titania"><br></td>
<td id="text">
<div id="header">Wander in these woods.</div><br>
This is some Text.<br>
<div id="caption"><br>This is my caption.</div>
</td>
</tr>
</table>

在此先感谢您的帮助！

Answer 1

添加垂直对齐：顶部； 以及td＃images。

Answer 2

记住我在上面的评论，您可能想要移动vertical-align: top; 从td#text到td#images

jsFiddle示例