Невозможно выровнять эти <TD>строк - PullRequest
0 голосов
/ 11 июля 2020

У меня есть таблица, которую я использую для изображения и текста в нижнем колонтитуле (с использованием Avada в WordPress). Да хоть убей, я не могу их выровнять. Кто-нибудь сможет дать какое-то руководство?

Код ниже, а также ссылка на код:

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

1 Ответ

1 голос
/ 11 июля 2020

Похоже, что ваше изображение имеет больше белого пространства с одной стороны, чем с другой. Это делает так, что вы не можете легко центрировать его (вы можете использовать атрибут left / right, но это будет сложно на экранах разного размера). Я бы порекомендовал обрезать его так, чтобы он был по центру по умолчанию.

Ниже я добавил строку, чтобы авторские права были сосредоточены под изображением. Я также добавил к изображению черный фон и белую рамку, чтобы вы могли видеть, что изображение имеет больше белого пространства с правой стороны.

/* 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...