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

添加vertical-align：top; to td＃images。

Answer 2

请记住上面的评论，您可能希望将vertical-align: top;规则从td#text移至td#images

<强> jsFiddle example

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

2 个答案: