时间戳

首页 > 解决方案 > 无法排列这些行

html - 无法排列这些行

问题描述

我有一个表格，用于在页脚上放置图像和一些文本（在 WordPress 上使用 Avada）。对于我的生活，我无法排列这些。有人可以提供一些指导吗？

代码如下以及codepen的链接：

<table width="100%">
  <tr>
    <td align="center" width="100%">
      <img valign="bottom" align="center" src="https://test.seescan.com/wp-content/uploads/2020/02/Underground_Evolved_Horizontal-6.png" alt="Underground_Evolved_Footer" width="500px" height="400px" />
    </td>
    <td width="100%">
      <p style="color: #999999; line-height:8px;" align="center">Copyright ©
        <script>
          document.write(new Date().getFullYear());
        </script> SeeScan. All rights reserved.</p>
    </td>
  </tr>
</table>

标签： htmlcss

解决方案

您的图像的一侧似乎比另一侧有更多的空白。这使得你不能轻易地将它居中（你可以使用左/右属性，但这在不同尺寸的屏幕上会很挑剔）。我建议裁剪它，使其默认居中。

下面我添加了一行，以便版权在图像下方居中。我还为图像添加了黑色背景和白色边框，以便您可以看到图像在右侧有更多的空白空间。

/* made background black to see white picture */
table {
  background-color:black;
}

img {
  border:solid 1px white;
}
<table width="100%">
<tr>
<td align="center" width="100%">
<img valign="bottom" align="center" src="https://test.seescan.com/wp-content/uploads/2020/02/Underground_Evolved_Horizontal-6.png" alt="Underground_Evolved_Footer" width="500" />
</td>
  <tr>
<td align="center" width="100%">
<p style="color: #999999; line-height:8px;" align="center">Copyright ©  <script>document.write(new Date().getFullYear());</script> SeeScan. All rights reserved.</p>
</td>
    </tr>
</tr>
</table>

推荐阅读