垂直对齐底部和顶部在同一容器中

Question

我正在尝试将文本放在顶部并将img放在容器的底部。   对齐底部不工作

<th id="ship_method"  colspan="1" rowspan="1">
<div style="vertical-align:top;">Ship Method</div>
<div style="vertical-align:bottom;">
<img  src="unsortImg.png">
</div>
</th>

Answer 1

vertical-align样式仅适用于容器元素（在本例中为<th>），而不是您尝试对齐的元素。因此，您无法使用vertical-align在同一容器中以不同方式对齐两个元素。

相反，您可以使用绝对定位将两个元素放在顶部和底部。务必制作容器position:relative。在此处查看演示： http://jsfiddle.net/8qUeD/

Answer 2

除了@ tb11的回答：有一个很好的改变，你不需要像这样实际对齐你的文本，但只是让它们看起来像它们。

考虑到“较低”的内容是图片，您可以将其作为背景图片包含，并添加填充，文本不会与其重叠。

另外，请告诉我们，这里的大局是什么？你的整体设计是什么？您想在此处显示哪些内容/图像？这实际上是一个数据表还是您使用表格进行布局？如果您提供更多此类详细信息，我们可以提供更好的建议。