我缺少什么来将此 div 置于电子邮件模板的中心

Question

这是一个电子邮件模板，所以我想我应该避免使用 flex。知道为什么这不是居中的吗？

<div style="display:inline-block; margin: 0 auto;">
  <div style="background-color: #0097e6; border-radius:30px; font-size: 14px; font-weight: 400; padding: 8px 24px 8px 24px; text-align: center; margin: 24px 10px 5px 10px ;">
    <a href="https://example.com/" style="text-decoration:none; color:#ffffff;">See related</a>
  </div>
</div>

JSfiddle

Answer 1

不确定它是否适合您，但正在改变

display: inline-block;

至

display: table;

会将按钮对齐到容器的中心。

Answer 2

如果这是用于电子邮件，您需要使用 tables，因为 Outlook。

要居中，您需要 table 的宽度小于您居中的元素，需要 max-width 移动响应。

然后，由于 Outlook（桌面）无法识别最大宽度，您将需要一个 Outlook table 包装器。

<!--[if (gte mso 9)|(IE)]>
            <table width="600" align="center" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0;font-family:Arial, sans-serif;color:#333333;" >
            <tr>
            <td style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;border-collapse:collapse;" >
            <![endif]-->
<table style="margin:0 auto;width:100%;max-width:600px;"> <!--Core centering code -->
  <tr>
    <td>
      <div style="background-color: #0097e6; border-radius:30px; font-size: 14px; font-weight: 400; padding: 8px 24px 8px 24px; text-align: center; margin: 24px 10px 5px 10px ;">
    <a href="https://example.com/" style="text-decoration:none; color:#ffffff;">See related</a>
  </div>
    </td>
  </tr>
</table>
<!--[if (gte mso 9)|(IE)]>
            </td>
            </tr>
            </table>
            <![endif]-->

我缺少什么来将此 div 置于电子邮件模板的中心

What am I missing to center this div for an email template

html

css

wordpress

html-email