内容未在中心对齐

时间：2018-05-24 18:33:18

标签： html css email html-email

这是我第一次在这里发帖。我正在尝试开发此电子邮件时遇到问题。一切都很好看，直到你全屏展开。当扩展全屏时，一些内容最终彼此相邻。请帮忙。谢谢。

＆＃13;
＆＃13; 
.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;
  }
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：1)

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

<强>更新 要使其完全响应，您可以使用100％的表格宽度。您还需要margin:0 auto;标记上的img：

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

答案 1 :(得分：1)

您的HTML代码有点像灾难。首先，您的表缺少<td>个单元格。每个表行都需要一个。您无法开始使用<div>行。他们不混合。

你的桌子需要一个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>

答案 2 :(得分：0)

正如@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>
相关问题
最新问题