在浏览器窗口（或电子邮件客户端预览窗格）中居中 HTML 电子邮件内容的最佳方式是什么？答案

【问题标题】：What's the best way to center your HTML email content in the browser window (or email client preview pane)?在浏览器窗口（或电子邮件客户端预览窗格）中居中 HTML 电子邮件内容的最佳方式是什么？
【发布时间】：2011-02-20 21:56:49
【问题描述】：

我通常对margin:0 auto 使用 CSS 规则，并为基于标准浏览器的内容使用 960 容器，但我是 HTML 电子邮件创建的新手，我现在想以以下设计为中心没有标准 CSS 的浏览器窗口。

http://static.helpcurenow.org/mockups/emails/2010/may-survey/survey.html

我似乎记得在某处看到它也可以通过将您的电子邮件表格设计包装在一个设置为width:100% 的外部表格中并在 tbody 上为text-align:center 使用一些内联样式或类似的东西来完成它？

对此有最佳实践吗？

【问题讨论】：

"margin:0px auto" .. 仅供参考，当您使用 0 任何东西时，您不需要指定单位 :)

标签： html-email css-tables

【解决方案1】：

要使表格在电子邮件中间居中，请使用

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

在中间使用对齐内容：

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

【讨论】：

【解决方案2】：

我在 Outlook 和 Office365 上苦苦挣扎。令人惊讶的是，似乎起作用的是：

<table align='center' style='text-align:center'>
  <tr>
    <td align='center' style='text-align:center'>
      <!-- AMAZING CONTENT! -->
    </td>
  </tr>
</table>

我只列出了解决我的 Microsoft 电子邮件问题的一些关键事项。

我可以补充一点，构建一个在所有电子邮件上看起来都很好的电子邮件是一种痛苦。这个网站非常适合测试：https://putsmail.com/

它允许您列出您想要发送测试电子邮件的所有电子邮件。您可以将代码直接粘贴到窗口中，进行编辑、发送和重新发送。它帮助了我很多。

【讨论】：

谢谢，这对我有用。我试图将我在 Outlook 中使用发布者创建的电子邮件模板居中

【解决方案3】：

在某些情况下，在 Outlook 2007、2010、2013 中将 html 电子邮件居中对齐时，margin="0 auto" 不会减少。

尝试以下方法：

使用 style="table-layout: fixed;" 将您的内容包装在另一个表格中并对齐=“中心”。

<!-- WRAPPING TABLE -->
<table cellpadding="0" cellspacing="0" border="0" style="table-layout: fixed;" align="center">
  <tr>
    <td>
      <!-- YOUR TABLES AND EMAIL CONTENT GOES HERE -->
    </td>
  </tr>
</table>

【讨论】：

如果只有一行一列，为什么要使用table？您没有使用 table 元素的任何功能。
您在 html 电子邮件中使用表格，因为几乎所有客户端都可以使用的 html 电子邮件问题的解决方案将以某种方式涉及“添加另一个表格”

【解决方案4】：

这是您的防弹解决方案：

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="33%" align="center" valign="top" style="font-family:Arial, Helvetica, sans-serif; font-size:2px; color:#ffffff;">.</td>
    <td width="35%" align="center" valign="top">
      CONTENT GOES HERE
    </td>
    <td width="33%" align="center" valign="top" style="font-family:Arial, Helvetica, sans-serif; font-size:2px; color:#ffffff;">.</td>
  </tr>
</table>

试试吧，看起来有点乱，但即使使用雅虎邮件的新 Firefox 更新也能正常工作。（不将电子邮件居中，因为用 div 替换主表）

【讨论】：

小不可见的“句号”应该换成一个并且应该删除使小隐形周期隐形的说明。我什至无法通过这些设置向自己发送测试电子邮件，因为它们直接发送给我的提供商垃圾邮件地狱 :) 恶意软件防御使任何鱼腥味变得更加可疑......例如：` `

【解决方案5】：

table align="center" ...这会对齐页面的表格中心。

使用 td align="center" 使该 td 内的内容居中，这对于居中对齐的文本很有用，但是您会遇到一些电子邮件客户端在子级别表中居中内容的问题，因此使用 td align 作为居中的顶级方法页面上的“容器”表不是这样做的。改用表格对齐。

仍然使用你的 100% 包装表，纯粹作为正文的包装，因为一些电子邮件客户端不显示正文背景颜色，但它会与 100% 表一起显示，所以将你的正文颜色添加到正文和 100% 表。

关于 html 电子邮件开发的所有怪癖，我可以一直讲下去。我只能说测试测试再测试。 Litmus.com 是测试电子邮件的绝佳工具。

你做的越多，你就会越了解什么在什么电子邮件客户端中有效。

希望这会有所帮助。

【讨论】：

【解决方案6】：

为了谷歌用户和完整性：

当我需要经历实现 html 电子邮件模板或签名的痛苦时，我总是使用以下参考： http://www.campaignmonitor.com/css/

我列出了大多数（如果不是全部）CSS 选项的 CSS 支持列表，在一些最常用的电子邮件客户端之间进行了很好的比较。

对于居中，请随意使用 CSS（因为 HTML 4.01 中不推荐使用 align 属性）。

<table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td style="text-align: center;">
            Your Content
        </td>
    </tr>
</table>

【讨论】：

在表格或其他块级元素居中时不起作用。
你说得对，我不确定是否支持 margin: 0 auto;（与 width 结合使用），但这通常适用于浏览器，但我不确定电子邮件是否 -客户在这种情况下相处得很好。
是的，我不确定是否所有浏览器都支持它，所以使用了可信赖但已弃用的标签。

【解决方案7】：

将表格居中对齐。

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

如果是表格，则在您拥有“您的内容”的地方，将其设置为所需的宽度，您将获得居中的内容。

【讨论】：

是否有一个 CSS 属性可以做同样的事情？ text-align: center 没有做同样的事情。
一些电子邮件提供商需要这种已弃用的对象居中方法。（我在考虑 Apple Mail）。
当您为电子邮件布局编写代码时，您的代码就像是 1999 年一样。
这会导致子表在 Outlook Web App (OWA) 中也以 tds 为中心，无论它们的对齐方式是否设置为 left。
在 gmail 手机中不起作用。然而，下面的这个答案确实stackoverflow.com/a/38149673/129638

【解决方案8】：

电子邮件中的 CSS 很痛苦。不幸的是，您可能需要表格，因为并非所有电子邮件客户端都支持 CSS。

也就是说，使用 HTML 过渡 DOCTYPE，而不是 XHTML，并使用 <center>。

【讨论】：