为什么我的左填充在此内联 css 中丢失了？

Question

我正在尝试添加一封响应式 html 电子邮件以向用户发送一封 link 以重置他们的密码。左侧填充不起作用，我希望它像右侧一样响应，让容器始终居中。

我的内联 css 中缺少哪一行代码来执行我的左填充？

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <meta http-equiv="Content-Type" content="text/html" />
    <title>Whosebug</title>
    <style>
      /*
      //  MARK: Styling
      */
      .button {
        border-radius: 4px;
        font-family: -apple-system-body, BlinkMacSystemFont, sans-serif;
        color: white;
        padding: 12px 12px;
        text-decoration: none;
        display: inline-block;
      }
      .buttonPassword {
        margin: auto;
      }
      #buttonReset {
        width: 150px;
        margin: auto;
        font-family: -apple-system-body, BlinkMacSystemFont, sans-serif;
        text-align: center;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        font-weight: bold;
      }
      body {
        position: relative;
        margin: 16;
        font-family: -apple-system-body, BlinkMacSystemFont, sans-serif;
      }
      .container {
        display: block;
        margin: 16 auto !important;
        max-width: 580px;
        padding: 10px;
        width: 580px;
      }
      .content {
        box-sizing: border-box;
        display: block;
        margin: 16 auto;
        max-width: 580px;
        padding: 10px;
      }
      footer {
        width: 100%;
        font-family: -apple-system-caption2, BlinkMacSystemFont, sans-serif;
      }
      header {
        margin: auto;
        width: 100%;
        position: relative;
        z-index: 100;
        top: 0;
      }
      html, body {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        margin: 16;
        padding: 16;
      }
      .logo h1 {
        font-family: -apple-system-large-title, BlinkMacSystemFont, sans-serif;
        display: inline;
      }
      .logo img {
        padding: 16px;
        width: 64px;
        height: 64px;
        vertical-align: middle;
      }
      p {
        font-family: -apple-system-body, BlinkMacSystemFont, sans-serif;
      }
      .preheader {
        color: transparent;
        display: none;
        height: 0;
        max-height: 0;
        max-width: 0;
        opacity: 0;
        overflow: hidden;
        mso-hide: all;
        visibility: hidden;
        width: 0;
      }
      .right h2 {
        font-family: -apple-system-caption2, BlinkMacSystemFont, sans-serif;
        text-align: center;
        padding: 1em;
      }
      /*
      //  MARK: Screen Sizing
      */
      @media only screen and (max-width: 620px) {
        .logo h1 {
          display: inline;
        }
        .logo img {
          padding: 8px;
          width: 48px;
          height: 48px;
          vertical-align: middle;
        }
        table[class=body] .content {
          padding: 0 !important;
        }
        table[class=body] .container {
          padding: 0 !important;
          width: 100% !important;
        }
      }
      /*
      //  MARK: Colors Declaration
      //  Light Mode
      */
      .button {
        background-color: #FF9000;
      }
      #buttonReset {
        background-color: #FF9000;
      }
      .content {
        color: #000;
      }
      header {
        background: linear-gradient(#FF9000, #FFA101);
      }
      .logo h1 {
        color: #FFF;
      }
      .preheader {
        color: transparent;
      }
      .right h2 {
        color: #FFF;
      }
      /*
      //  Dark Mode
      */
      @media (prefers-color-scheme: dark) {
        .button {
          background-color: #FF9A0A;
        }
        .content {
          color: #FFF;
        }
        header {
          background: linear-gradient(#FF9A0A, #FF9000);
        }
        .logo h1 {
          color: #FFF;
        }
        .preheader {
          color: transparent;
        }
        .right h2 {
          color: #000;
        }
      }
    </style>
  </head>
  <body>
    <span class="preheader">
    Email with instructions to reset your password.
    </span>
    <table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body">
      <tr>
        <td>&nbsp;</td>
        <td class="container">
          <header>
            <div class="logo">
              <h1><img src="/images/logo.png" alt="logo">Whosebug</h1>
            </div>
          </header>
          <div id="content">
            <br>
            <p>
              Hello,
              <br><br>
              A request has been received to change the password for your StackOverlfow account.
              <br><br><br>
            <p>
            <center>
              <p>
                Click the link below to reset your password.
              <p>
              </p>
            </center>
            </p>
            </p>
            <br>
            <div class="buttonPassword">
              <center>
                <a class="button" href="#(link)">
                <strong>Reset password</strong>
                </a>
              </center>
            </div>
            <br>
            <br>
            <p>
              The link has a validity of one hour. Ask for a new one after this delay.
              <br>
              If you did not initiate this request, please contact us immediately at <a href="mailto:contact@Whosebug.eu">contact@Whosebug.eu</a> and ignore this
              email.
            </p>
            <br>
            <p>
              Thank you,
              <br>
              The StackOverlfow Team
            </p>
            <br>
          </div>
          <footer>
            <div class="right">
              <center>
                <p>© 2021 StackOverlfow. All right reserved.</p>
              </center>
            </div>
          </footer>
        </td>
        <td>&nbsp;</td>
      </tr>
    </table>
  </body>
</html>

Answer 1

在 table

上添加 align="center"

<table role="presentation" border="0" align="center" cellpadding="0" cellspacing="0" class="body">

https://jsfiddle.net/lalji1051/fgw258dr/

Answer 2

解决方案 1： 您只需将容器 class 边距更改为 (0 auto) 即可使容器在每个屏幕上居中并响应，这会自动使 div 居中。

 .container {
        display: block;
        margin: 0 auto !important;
        max-width: 580px;
        padding: 10px;
        width: 580px;
      }

在我的 code_pen

上观看最终结果

方案二： 只需在 table 标签中添加 align=center。

为什么我的左填充在此内联 css 中丢失了？

Why is my left padding missing inside this inline css?

html

css

inline-styles