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

【问题标题】：How do I Center Left-aligned Text in an Outlook Email?如何在 Outlook 电子邮件中居中左对齐文本？
【发布时间】：2013-08-10 00:07:28
【问题描述】：

我正在尝试设计一个响应式电子邮件模板以适用于所有主要客户，而我即将完成，但由于 Outlook 不支持 max-width，并且我将所有元素设置为 width: 100% ，它把我的内容一直放在左边，因为它是左对齐的。我可以使用align:center 或margin: 0 auto 将页眉和页脚居中。

我可以做些什么来防止我的内容一直向左移动而不给任何固定宽度或使用最大宽度（我正在使用，但 Outlook 只是忽略）？

【问题讨论】：

你试过做一个margin-left吗？
好吧，我不认为这不适用于 100% 宽度的响应式布局，因为我无法给出这样的固定距离。如果我给它留出 150 像素的边距，以便它在 Outlook 中很好地布局，那么它会在 iOS gmail 或其他东西中搞砸。
您是要使正文内容居中，还是只是缩进？我不太明白想要的效果是什么？无论如何，“我如何设计这封电子邮件”的答案几乎总是表格......
它被放置在一个表格中，是的，我希望正文内容居中而不给它一个固定的宽度，也没有使文本居中（保持左对齐）跨度>

标签： html css email outlook responsive-design

【解决方案1】：

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

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

margin-left: 4%;

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

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

【讨论】：

好吧，我只是再次尝试使用媒体查询，我认为接下来出现的问题是，要使用媒体查询，您需要 <head></head> 中的样式，但 Gmail 没有不玩这个，所以对于任何需要样式的元素，它需要内联和头部完成（因为一些客户不喜欢内联），并且内联覆盖了它看起来像的媒体查询类我的测试，即使在<head> 的班级上使用!important。
至于百分比，这将是与像素相同的问题，尽管不那么极端，因为它在不同的电子邮件客户端（正确接受最大宽度居中的那些）中的布局不同，它只是对一些人来说，从左边推得太远了。
响应式（媒体查询）在 Gmail 中不起作用，但流式处理。

【解决方案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>

【讨论】：