Question

目前正尝试将图片对齐到桌面的底部。目前它自然地恢复到顶峰。我已经尝试了所有的东西，但图像仍然位于桌面的顶部。

public class ExampleClass{
...
@Autowired
ExampleInjection exampleInjection
...
}

我知道这将是一件简单的事情，但此刻我无法理解为什么图像不会移动。

Answer 1

首先，这是一个真正的混乱。其次，您需要查看CSS文件并查找“logo-label”正在执行的操作。这是控制图像的对齐。

<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>

Answer 2

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

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

您可以根据需要拥有尽可能多的<tr>和<td>。

默认情况下，表格没有宽度。换句话说，它的宽度设置为auto，即它取内容的宽度。设置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-label CSS规则中可能还有一些规则，我们不知道这些规则。

将图像对齐到表格底部

2 个答案: