无法将 HTML 页脚拉伸至全宽

Question

我使用 table 制作了 HTML 电子邮件布局，该设计在我的机器上运行良好，但是当我将代码放入 putsmail 进行测试时当我在桌面上查看邮件时，页脚向左移动。它应该是这样的：

它是这样的：

我的HTML代码：

<!--Footer-->
                  <table class="footer">
                    <tr>
                      <td style="padding: 50px;background-color: #f7f7f7">
                        <table width="100%">
                          <p style="text-align: center; font-size: 12px; line-height: 1.5;">
                            Having Trouble with something?
                            <br>
                            Reach out to us <a href="#">support@vantagecircle.com</a>
                            </p>
                            <img style="display: block; margin-right: auto;margin-left: auto; padding-bottom: 25px;" src="https://i.ibb.co/1Z05xTH/vc-footer-logo.png" width="120px" />
                        </table>
                      </td>
                    </tr>
                  </table>

我的CSS代码：

.footer{
        align-content: center;
        width: max-content;
        position: relative;
      }

提前致谢

Answer 1

对 table 使用 width: 100%。

Answer 2

将 width: max-content; 更改为 width: 100%;，它应该可以工作。您可以详细了解“最大内容”的工作原理 here

Answer 3

电子邮件模板使用内联 CSS 更安全，我也不认为任何电子邮件客户端支持 align-content 属性甚至 max-content width。也许可以这样尝试：

<table width="100%">
  <tr width="100%">
    <td style="padding: 50px;background-color:#f7f7f7">
      <div style="margin-left:auto;margin-right:auto;">
        <p style="text-align: center; font-size: 12px; line-height: 1.5;">
          Having Trouble with something?
          <br>
          Reach out to us <a href="#">support@vantagecircle.com</a>
        </p>
        <img style="display: block; margin-right: auto;margin-left: auto; padding-bottom: 25px;" src="https://i.ibb.co/1Z05xTH/vc-footer-logo.png" width="120px" />
      </div>
    </td>
  </tr>
</table>

请注意，我在此处使用 width 内联，并在内部 td 中添加了一个 div 以与中心对齐。

无法将 HTML 页脚拉伸至全宽

Unable to stretch HTML footer to the full width

html

css

html-table

flexbox