内容未居中对齐

Question

这是我第一次在这里发帖。我在尝试开发这封电子邮件时遇到了问题。在展开全屏之前，一切看起来都很好。展开全屏时，某些内容最终会彼此相邻。请帮忙。谢谢你。

.footer {
  width: 600px;
  background-color: #262626;
  text-align: center;
  font-family: verdana;
  text-decoration: none;
}

@media only screen and (max-width: 480px) {
  img {
    max-width: 100% !important;
  }
  .footer {
    max-width: 100% !important;
  }
}

<center>
  <table>
    <tr>
      <a href="https://www.dollarshaveclub.com/our-products/clean/conditioner"><img src="https://i.imgur.com/PDjptBG.jpg"></a>
    </tr>
    <tr>
      <img src="https://i.imgur.com/hQ742x0.jpg">
    </tr>
    <tr>
      <img src="https://i.imgur.com/Tp7E0YJ.jpg">
    </tr>
    <tr>
      <a href="https://www.dollarshaveclub.com/our-products/clean/conditioner"><img src="https://i.imgur.com/jGkDOCo.jpg"></a>
    </tr>
    <tr>
      <a href="https://www.dollarshaveclub.com/our-products/clean/shampoo-and-conditioner-bundle"><img src="https://i.imgur.com/ZO8mC30.jpg"></a>
    </tr>
    <div class="footer">
      <img style="padding-top:20px;" src="https://i.imgur.com/CShaFcV.png">
      <p style="font-size:13px; color:#9c9c9c;">2018 Dollar Shave Club. All Rights Reserved.</p>
      <p style="font-size:11px; color:#757575;">13335 Maxella Ave. Marina Del Rey, CA 90292</p>
      <a href="https://help.dollarshaveclub.com/hc/en-us/articles/115004873807-Privacy-Policy" style="font-size:11px; color: #545454;">Privacy</a>
      <a href="https://help.dollarshaveclub.com/hc/en-us/sections/115001914007-Membership-Settings" style="font-size:11px; color: #545454;">Unsubscribe</a>
      <br>
      <br>
    </div>
    </tr>
  </table>
</center>

Answer 1

浏览器未呈现您的 table（因为您没有 <td> 元素）。

更新要使其完全响应，您可以使用 100% 的 table 宽度。您还需要 img 标签上的 margin:0 auto;：

.footer {
  width: 600px;
  background-color: #262626;
  text-align: center;
  font-family: verdana;
  text-decoration: none;
}

img {
  margin: 0 auto;
}

@media only screen and (max-width: 600px) {
  img {
    max-width: 100% !important;
  }
  .footer {
    max-width: 100% !important;
  }
}

<center>
  <table width="100%" cellpadding="0" style="border-collapse: collapse;">
    <tr>
      <td>
        <a href="https://www.dollarshaveclub.com/our-products/clean/conditioner" target="_blank"><img src="https://i.imgur.com/PDjptBG.jpg" style="display:block;" /></a>
      </td>
    </tr>
    <tr>
      <td>
        <img src="https://i.imgur.com/hQ742x0.jpg" style="display:block;" />
      </td>
    </tr>
    <tr>
      <td>
        <img src="https://i.imgur.com/Tp7E0YJ.jpg" style="display:block;" />
      </td>
    </tr>
    <tr>
      <td>
        <a href="https://www.dollarshaveclub.com/our-products/clean/conditioner" target="_blank"><img src="https://i.imgur.com/jGkDOCo.jpg" style="display:block;" /></a>
      </td>
    </tr>
    <tr>
      <td>
        <a href="https://www.dollarshaveclub.com/our-products/clean/shampoo-and-conditioner-bundle" target="_blank"><img src="https://i.imgur.com/ZO8mC30.jpg" style="display:block;" /></a></td>
    </tr>
    <tr>
      <td class="footer">
        <img style="padding-top:20px; display:block;" src="https://i.imgur.com/CShaFcV.png" />
        <p style="font-size:13px; color:#9c9c9c;">2018 Dollar Shave Club. All Rights Reserved.</p>
        <p style="font-size:11px; color:#757575;">13335 Maxella Ave. Marina Del Rey, CA 90292</p>
        <a href="https://help.dollarshaveclub.com/hc/en-us/articles/115004873807-Privacy-Policy" target="_blank" style="font-size:11px; color: #545454;">Privacy</a>
        <a href="https://help.dollarshaveclub.com/hc/en-us/sections/115001914007-Membership-Settings" target="_blank" style="font-size:11px; color: #545454;">Unsubscribe</a>
        <br>
        <br>
      </td>
    </tr>
  </table>
</center>

Answer 2

正如@showdev所说。您的问题是没有 <td> 元素。

<!DOCTYPE html>

<head>
    <style type="text/css">
        .footer {
            width: 600px;
            background-color: #262626;
            text-align: center;
            font-family: verdana;
            text-decoration: none;
        }

        @media only screen and (max-width: 480px) {
            img {
                max-width: 100% !important;
            }
            .footer {
                max-width: 100% !important;
            }
        }
    </style>
</head>
<html>

<body>
    <center>
        <table>
            <tr>
                <td>

                    <a href="https://www.dollarshaveclub.com/our-products/clean/conditioner">
                        <img src="https://i.imgur.com/PDjptBG.jpg">
                    </a>
                </td>
            </tr>
            <tr>
                <td>

                    <img src="https://i.imgur.com/hQ742x0.jpg">
                </td>
            </tr>
            <tr>
                <td>

                    <img src="https://i.imgur.com/Tp7E0YJ.jpg">
                </td>
            </tr>
            <tr>
                <td>

                    <a href="https://www.dollarshaveclub.com/our-products/clean/conditioner">
                        <img src="https://i.imgur.com/jGkDOCo.jpg">
                    </a>
                </td>
            </tr>
            <tr>
                <td>
                    <a href="https://www.dollarshaveclub.com/our-products/clean/shampoo-and-conditioner-bundle">
                        <img src="https://i.imgur.com/ZO8mC30.jpg">
                    </a>
                </td>

            </tr>
            <tr>
                <td>

                    <div class="footer">
                        <img style="padding-top:20px;" src="https://i.imgur.com/CShaFcV.png">
                        <p style="font-size:13px; color:#9c9c9c;">2018 Dollar Shave Club. All Rights Reserved.</p>
                        <p style="font-size:11px; color:#757575;">13335 Maxella Ave. Marina Del Rey, CA 90292</p>
                        <a href="https://help.dollarshaveclub.com/hc/en-us/articles/115004873807-Privacy-Policy" style="font-size:11px; color: #545454;">Privacy</a>
                        <a href="https://help.dollarshaveclub.com/hc/en-us/sections/115001914007-Membership-Settings" style="font-size:11px; color: #545454;">Unsubscribe</a>
                        <br>
                        <br>
                    </div>

                </td>
            </tr>
        </table>
    </center>
</body>

</html>

Answer 3

您的 html 代码有点糟糕。首先，您的 table 缺少 <td> 个单元格。每 table 行需要一个。您不能开始一行并使用 <div>。他们不混。

你的 table 需要一个 width 来防止它散开。我添加了 width="600"，因为这对于电子邮件来说是一个很好的宽度。

如果您将 display: block; 添加到内联样式，您的图像会表现得更好。另外，您不妨添加一个结束斜杠 />.

使用下面的 html 可以解决您遇到的大部分问题。

祝你好运。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Content not aligning in center</title>
  <style>
    .footer {
      width: 600px;
      background-color: #262626;
      text-align: center;
      font-family: verdana;
      text-decoration: none;
    }

    @media only screen and (max-width: 480px) {
      img {
        max-width: 100% !important;
     }
     .footer {
       max-width: 100% !important;
     }
   }
  </style>
</head>
<body>
<center>
<table width="600">
  <tr>
    <td>
      <a href="https://www.dollarshaveclub.com/our-products/clean/conditioner" target="_blank"><img src="https://i.imgur.com/PDjptBG.jpg" style="display:block;" /></a>
  </td>
</tr>
<tr>
  <td>
    <img src="https://i.imgur.com/hQ742x0.jpg" style="display:block;" />
  </td>
</tr>
<tr>
  <td>
    <img src="https://i.imgur.com/Tp7E0YJ.jpg" style="display:block;" />
   </td>
</tr>
<tr>
  <td>
    <a href="https://www.dollarshaveclub.com/our-products/clean/conditioner" target="_blank"><img src="https://i.imgur.com/jGkDOCo.jpg" style="display:block;" /></a>
  </td>
</tr>
<tr>
  <td>
    <a href="https://www.dollarshaveclub.com/our-products/clean/shampoo-and-conditioner-bundle target="_blank"><img src="https://i.imgur.com/ZO8mC30.jpg" style="display:block;" /></a></td>
</tr>
<tr>
<td class="footer">
  <img style="padding-top:20px; display:block;" src="https://i.imgur.com/CShaFcV.png" />
  <p style="font-size:13px; color:#9c9c9c;">2018 Dollar Shave Club. All Rights Reserved.</p>
  <p style="font-size:11px; color:#757575;">13335 Maxella Ave. Marina Del Rey, CA 90292</p>
  <a href="https://help.dollarshaveclub.com/hc/en-us/articles/115004873807-Privacy-Policy" target="_blank" style="font-size:11px; color: #545454;">Privacy</a>
  <a href="https://help.dollarshaveclub.com/hc/en-us/sections/115001914007-Membership-Settings" target="_blank" style="font-size:11px; color: #545454;">Unsubscribe</a>
  <br>
  <br>
  </td>
  </tr>
</table>
</center>
</body>
</html>

内容未居中对齐

Content not aligning in center

html

css

email

html-email