javascript - 垂直对齐同一容器中的底部和顶部

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 的回答：有一个很好的改变，你不需要像这样实际对齐你的文本，而只是让它们看起来像它们一样。

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

或者，告诉我们，这里的大局是什么？你的整体设计是什么？您要在此处显示的内容/图像是什么？这实际上是一个数据表还是您使用该表进行布局？如果您提供更多这样的细节，我们可以提供更好的建议。