将 HTML 电子邮件内容集中在浏览器窗口(或电子邮件客户端预览窗格)中的最佳方法是什么?

发布于 2024-09-02 03:50:38 字数 463 浏览 8 评论 0原文

我通常将 CSS 规则用于 margin:0 auto 以及基于标准浏览器内容的 960 容器,但我是 HTML 电子邮件创建的新手,我有以下设计就像现在在没有标准 CSS 的情况下在浏览器窗口中居中。

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

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

这有最佳实践吗?

I normally use CSS rules for margin:0 auto along with a 960 container for my standard browser based content, but I'm new to HTML email creation and I've got the following design that I'd like to now center in the browser window without standard CSS.

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

I seem to recall seeing somewhere that it can also be accomplished by wrapping your email table design in an outer table set to width:100% and using some inline style for text-align:center on the tbody or something like this to do it?

Is there a best practice for this?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(8

月竹挽风 2024-09-09 03:50:38

将表格居中对齐。

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

如果您有“您的内容”,如果它是表格,请将其设置为所需的宽度,您将获得居中的内容。

Align the table to center.

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

Where you have "your content" if it is a table, set it to the desired width and you will have centred content.

魔法唧唧 2024-09-09 03:50:38

为了谷歌用户和完整性:

当我需要经历实现 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>

For googlers and completeness sake:

Here's a reference I always use when I need to go through the pain of implementing html email-templates or signatures:
http://www.campaignmonitor.com/css/

I'ts a list of CSS support for most, if not all, CSS options, nicely compared between some of the most used email clients.

For centering, feel free to just use CSS (as the align attribute is deprecated in HTML 4.01).

<table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td style="text-align: center;">
            Your Content
        </td>
    </tr>
</table>
ㄟ。诗瑗 2024-09-09 03:50:38

tablealign=“center”...这会对齐页面的表格中心。

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

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

我可以继续讲述 html 电子邮件开发的所有怪癖。我只能说,测试测试再测试。 Litmus.com 是一个测试电子邮件的好工具。

您做得越多,您就会越了解哪些电子邮件客户端有效。

希望这有帮助。

table align="center" ... this aligns the table center of page.

Using td align="center" centers the content inside that td, useful for centered aligned text but you will have issues with some email clients centering content in sub level tables so using using td align as a top level method of centering your "container" table on the page is not the way to do it. Use table align instead.

Still use your 100% wrapper table too, purely as a wrapper for the body, as some email clients don't display body background colors but it will show it with the 100% table, so add your body color to both body and the 100% table.

I could go on and on for ages about all the quirks of html email dev. All I can say is test test and test again. Litmus.com is a great tool for testing emails.

The more you do the more you will learn about what works in what email clients.

Hope this helps.

万水千山粽是情ミ 2024-09-09 03:50:38

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

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

I was struggling with Outlook and Office365. Surprisingly the thing that seemed to work was:

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

I only listed some of the key things that resolved my Microsoft email issues.

Might I add that building an email that looks nice on all emails is a pain. This website was super nice for testing: https://putsmail.com/

It allows you to list all the emails you'd like to send your test email to. You can paste your code right into the window, edit, send, and resend. It helped me a ton.

自由如风 2024-09-09 03:50:38

这是您的防弹解决方案:

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

Here's your bulletproof solution:

<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>

Just Try it out, Looks a bit messy, but It works Even with the new Firefox Update for Yahoo mail. (doesn't center the email because replace the main table by a div)

无风消散 2024-09-09 03:50:38

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

也就是说,使用 HTML Transitional DOCTYPE,而不是 XHTML,并使用

CSS in emails is a pain. You'll probably need tables unfortunately, because CSS is not greatly supported in all email clients.

That said, use an HTML Transitional DOCTYPE, not XHTML, and use <center>.

征﹌骨岁月お 2024-09-09 03:50:38

要将表格居中于电子邮件的中间,请使用

<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>

To center the table in the middle of the email use

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

To align the content in the middle use:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td align="center">
            Your Content
        </td>
    </tr>
</table>
浅暮の光 2024-09-09 03:50:38

在某些情况下,在 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>

In some cases margin="0 auto" won't cut the mustard when center aligning a html email in Outlook 2007, 2010, 2013.

Try the following:

Wrap your content in another table with style="table-layout: fixed;" and align=“center”.

<!-- 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>
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文