将图像与表格底部对齐

Question

当前正在尝试将图像与其表格底部对齐。目前，它自然恢复到顶部。我已经尝试了所有方法，但图像仍然位于桌子的顶部。

</table>
<td class="logo-label">
<table>
<img src="http://strawberry.wpdevcloud.com/wp-content/uploads/2018/06/smllnat_logo.jpg" height="36" width="113">
</td>
</table>

我知道这将是一件简单的事情，但目前我无法理解为什么图像没有移动。

Answer 1

首先，HTML结构是完全错误的。<td>和</td>是表格单元格，因此它们位于<tr>和</tr>(表格行(之间。<tr>和</tr>位于<table>和</table>(表本身(之间。表的结构如下所示：

<table>
<tr>
<td>Cell contents here</td>
</tr>
</table>

您可以根据需要拥有任意数量的<tr>和<td>。

默认情况下，表格没有宽度。换句话说，它的宽度设置为自动，即它采用其内容的宽度。设置width和height属性以避免这种情况。默认情况下，表格也没有边框。设置border="1"以使边框可见。

要将图像与其父元素的底部对齐(在本例中为<td>(，一种方法是为父元素设置position:relative并为子元素设置position:absolute。然后，为子元素设置bottom:0。然后，图像将与元素的底部对齐。下面的代码片段总结了整个过程。

<table border="1" width="500" height="300">
<tr>
<td style="position: relative">
<img style="position:absolute; bottom:0" src="http://strawberry.wpdevcloud.com/wp-content/uploads/2018/06/smllnat_logo.jpg" alt="Natural Complexions" height="36" width="113">
</td>
</tr>
</table>

您的logo-labelCSS 规则中可能还有一些我们不知道的规则。

Answer 2

首先，你真是一团糟。 其次，您需要查看您的CSS文件并查找"徽标标签"正在做什么。 那就是控制图像的对齐方式。

<table>
<tr>
<td class="logo-label">
<img src="http://strawberry.wpdevcloud.com/wp-content/uploads/2018/06/smllnat_logo.jpg" alt="Natural Complexions" height="36" width="113">
</td>
</tr>
</table>