Question

我正在尝试布置一个响应式电子邮件模板，以便在所有主要客户端上工作，我就在那里，但由于Outlook不支持max-width，我将所有元素都设置为{ {1}}，它将我的内容一直放到左边，因为它是左对齐的。我可以使用width: 100%或align:center将页眉和页脚居中。

如果不提供任何固定宽度或使用max-width（我正在使用，但Outlook只是忽略），我该怎么做才能防止我的内容一直向左移动？

Answer 1

听起来你更多地指的是“流畅的”布局（基于百分比），而不是“响应”布局（你可以使用媒体查询根据显示设备的宽度指定样式）。

由于为pixel设置margin-left值没有多大意义，为什么不将margin-left设置为percentage值？

margin-left: 4%;

否则，您可能需要查看MailChimp上有关媒体查询的以下资源。

http://templates.mailchimp.com/development/media-queries/

Answer 2

尝试此操作并根据需要使用媒体查询调整不同屏幕尺寸的宽度百分比。请注意，您的媒体查询不会在these email clients中生效。

</head>
<body style="margin: 0px; padding: 0px; background-color: #FFFFFF;" bgcolor="#FFFFFF">

<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#252525">
  <tr>
    <td align="center" style="padding-top:30px; padding-bottom:30px;">
      <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td width="10%">&nbsp;
          </td>
          <td align="left" width="80%" bgcolor="#FFFFFF">
            &nbsp;<br>content<br>...<br>&nbsp;
          </td>
          <td width="10%">&nbsp;
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

</body></html>

如何在Outlook电子邮件中居中左对齐文本？

2 个答案: