103

我通常将 CSS 规则margin:0 auto与 960 容器一起用于基于标准浏览器的内容，但我是 HTML 电子邮件创建的新手，我有以下设计，我现在想在没有标准 CSS 的浏览器窗口中居中.

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

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

对此有最佳做法吗？

4

8 回答 8

241

使表格居中对齐。

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

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

于 2010-05-18T13:48:36.827 回答
35

为了谷歌和完整性：

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

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

对于居中，请随意使用 CSS（因为该align属性在 中已弃用HTML 4.01）。

<table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td style="text-align: center;">
            Your Content
        </td>
    </tr>
</table>
于 2012-05-31T08:21:26.347 回答
11

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

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

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

关于 html 电子邮件开发的所有怪癖，我可以继续讨论很长时间。我只能说测试测试再测试。Litmus.com 是测试电子邮件的绝佳工具。

您做的越多，您就会越了解哪些电子邮件客户端适用于哪些电子邮件客户端。

希望这可以帮助。

于 2012-09-15T08:22:18.413 回答
10

这是您的防弹解决方案：

<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 替换主表）

于 2014-05-22T14:18:12.683 回答
9

我在 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/

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

于 2016-07-01T16:01:35.017 回答
6

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

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

于 2010-05-18T13:44:51.870 回答
4

要将表格置于电子邮件中间，请使用

<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>
于 2021-01-27T15:12:26.553 回答
2

在某些情况下，在 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>
于 2015-04-02T17:08:08.487 回答