Question

我正在创建一个响应式电子邮件...并在邮件黑猩猩上进行了测试，整个过程都很好。但在确切目标上测试时（电子邮件客户端需要发送此电子邮件）我需要在电子邮件底部附近居中的图像...不会居中。见代码：

  <div class="layout one-col fixed-width" style=
  "Margin: 0 auto;max-width: 600px;min-width: 320px; width: 320px;width: calc(28000% -167400px);overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;">
  <div class="layout__inner" style=
  "border-collapse: collapse;display: table;width: 100%;background-color: #f8f6f6;"
  margin-left:="" emb-background-style="">
      <!--[if (mso)|(IE)]><table align="center" cellpadding="0" cellspacing="0" role="presentation"><tr class="layout-fixed-width" emb-background-style><td style="width: 600px" class="w560"><![endif]-->

      <div class="column" style=
      "text-align: center; position: absolute !important; color: #8e8e8e;font-size: 14px;line-height: 21px;font-family: Cabin,Avenir,sans-serif;max-width: 600px;min-width: 320px; width: 320px;width: calc(28000% -167400px);">
      <div style=
      "Margin-left: 20px;Margin-right: 20px;Margin-bottom: 15px;font-size: 12px;font-style: normal;font-weight: normal;"
        align="center">
          <a href="url"
          target="_blank"></a>

          <center>
            <img style=
            "Margin-top: 10px; Margin-left: 20px;Margin-right: 20px;Margin-bottom: 15px;border: 0;display: block; text-align: center; position: absolute !important;height: auto;width: 100%;max-width: 257px;"
            alt="Partnerships" src="image7_1112017.png" />
          </center>
        </div>
      </div><!--[if (mso)|(IE)]></td></tr></table><![endif]-->
    </div>
  </div>
</body>

其他一切似乎都很好......但这是唯一需要集中的图像。我从竞选活动监视器得到了模板并进行了相应的修改。图像不在模板中居中。

Answer 1

您只需要一列一行表（可能）。你的代码中有很多div，太多了。还有许多不会在电子邮件中工作的CSS。保持CSS简单，使用表格来居中。使用大量嵌套表而不是一个包含许多行和列的表。在你的DIV中尝试这个。它可能有用，但您可能还需要重新编写其余的代码。

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td align="center">

           <img 
            alt="Partnerships" src="image7_1112017.png" style="margin-top: 10px; margin-left: 20px;margin-right: 20px;margin-bottom: 15px;border: 0;" /></td>
        </tr> 
  </tbody>
</table>

Answer 2

设置块级元素的宽度将阻止它填充其容器的宽度。利用此功能，您可以设置边距，以便在左侧和右侧自动平均分配剩余空间。

<div style="width: 200px; margin: auto;">
    <img alt="Partnerships" src="image7_1112017.png" style="width: 100%;" />
</div>

这里我们将图像容器宽度设置为200px，将图像设置为100％，这样它将缩放到给定的宽度。因此，即使图像宽度为500px，它也会居中并缩小到200px，因为这是容器的已定义大小。如果您知道图像的宽度，请将其分配给容器，然后设置图像元素宽度变得不必要。

修改

您可能需要考虑重新格式化HTML的正文。您需要使用display:table;类从容器中删除layout__inner。

<body> <div class="layout one-col fixed-width" style="max-width: 600px;min-width: 320px;"> <div class="layout__inner" style="background-color: #f8f6f6;">  <div style="margin-bottom:15px;"> Here is some example content. This is where you want your main content to be. </div>  <div style="width:200px;margin:auto;"> <img alt="Partnerships" src="image7_1112017.png" style="width: 100%;" /> </div> </div> </div> </body>

以下是一个工作示例：JSFiddle

图片不会以我的电子邮件为中心。使用div。 CSS / HTML

2 个答案: