blocks|key|1031953|text|电子邮件中的CSS是一件痛苦的事情。不幸的是，你可能需要表格，因为并不是所有的电子邮件客户端都很支持CSS。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1031954|这就是说，使用HTML，而不是XHTML，并使用<center>。|offset|length|style|CODE|1031955|entityMap^0|0|O|8|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@$D|L|E|M|F|G]]|9|@]|A|$]]|$1|H|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|I|$]]

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

<p>That said, use an HTML Transitional DOCTYPE, not XHTML, and use <code>&lt;center&gt;</code>.</p>


blocks|key|1247112|text|将桌子居中对齐。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1247113|<table+width="100%25"+border="0"+cellspacing="0"+cellpadding="0">
++++<tr>
++++++++<td+align="center">
++++++++++++Your+Content
++++++++</td>
++++</tr>
</table>|code-block|syntax|javascript|1247114|如果你有“你的内容”，如果它是一个表格，将它设置为所需的宽度，你就会有居中的内容。|1247115|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Align the table to center.</p>

<pre><code>&lt;table width="100%" border="0" cellspacing="0" cellpadding="0"&gt;
    &lt;tr&gt;
        &lt;td align="center"&gt;
            Your Content
        &lt;/td&gt;
    &lt;/tr&gt;
&lt;/table&gt;
</code></pre>

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


blocks|key|1032070|text|为了谷歌员工和完整性的考虑：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1032071|当我需要经历实现html电子邮件模板或签名的痛苦时，这里有一个我经常使用的参考：http://www.campaignmonitor.com/css/|offset|length|1032072|我列出了大多数CSS支持，如果不是所有CSS选项，很好地比较了一些最常用的电子邮件客户端。|1032073|对于居中，只需使用CSS即可(因为在HTML+4.01中不推荐使用align属性)。|style|CODE|1032074|<table+width="100%25"+border="0"+cellspacing="0"+cellpadding="0">
++++<tr>
++++++++<td+style="text-align:+center;">
++++++++++++Your+Content
++++++++</td>
++++</tr>
</table>|code-block|syntax|javascript|1032075|entityMap|0|LINK|mutability|MUTABLE|url|http://www.campaignmonitor.com/css/^0|0|14|Z|0|0|0|I|9|X|5|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@$D|10|E|11|1|12]]|A|$]]|$1|F|3|G|5|6|7|13|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|14|8|@$D|15|E|16|J|K]|$D|17|E|18|J|K]]|9|@]|A|$]]|$1|L|3|M|5|N|7|19|8|@]|9|@]|A|$O|P]]|$1|Q|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

<p>For googlers and completeness sake:</p>

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

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

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

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


blocks|key|1032191|text|表align=“中心”...这将对齐页面的表格中心。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1032192|使用td+align=“居中”将内容居中到该td中，这对于居中对齐的文本很有用，但是您会遇到一些电子邮件客户端将内容居中放置在子级表格中的问题，因此使用td+align作为在页面上居中放置“容器”表格的顶层方法不是一种可行的方法。请改用表格对齐。|1032193|仍然使用你的100%25包装器表格，纯粹作为正文的包装器，因为一些电子邮件客户端不显示正文背景颜色，但它会与100%25表格一起显示，所以将你的正文颜色添加到正文和100%25表格中。|1032194|我可以没完没了地谈论html+email+dev的所有怪癖。我所能说的就是一次又一次的测试。Litmus.com是测试电子邮件的一个很棒的工具。|1032195|你做的越多，你就会学到更多关于什么在电子邮件客户端上工作的知识。|1032196|希望这能有所帮助。|1032197|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|P|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|Q|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|R|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|S|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|M|$]]

<p>table align="center" ... this aligns the table center of page.</p>

<p>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. </p>

<p>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.</p>

<p>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. </p>

<p>The more you do the more you will learn about what works in what email clients.</p>

<p>Hope this helps.</p>


blocks|key|1032256|text|这是你的防弹解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1032257|<table+width="100%25"+border="0"+cellspacing="0"+cellpadding="0">
++<tr>
++++<td+width="33%25"+align="center"+valign="top"+style="font-family:Arial,+Helvetica,+sans-serif;+font-size:2px;+color:#ffffff;">.</td>
++++<td+width="35%25"+align="center"+valign="top">
++++++CONTENT+GOES+HERE
++++</td>
++++<td+width="33%25"+align="center"+valign="top"+style="font-family:Arial,+Helvetica,+sans-serif;+font-size:2px;+color:#ffffff;">.</td>
++</tr>
</table>|code-block|syntax|javascript|1032258|试一试，看起来有点凌乱，但它甚至可以与雅虎邮件的新Firefox更新一起使用。(不将电子邮件居中，因为将主表替换为div)|1032259|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Here's your bulletproof solution:</p>

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

<p>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)</p>


blocks|key|1032363|text|在某些情况下，当在Outlook2007、2010、2013中居中对齐html电子邮件时，margin="0+auto“不会减少问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1032364|尝试以下操作：|1032365|用“style=-layout:+fixed;”和align=“align=”将您的内容包装在另一个表中。|1032366|
<table+cellpadding="0"+cellspacing="0"+border="0"+style="table-layout:+fixed;"+align="center">
++<tr>
++++<td>
++++++
++++</td>
++</tr>
</table>|code-block|syntax|javascript|1032367|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|O|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|P|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

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

<p>Try the following:</p>

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

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


blocks|key|1032471|text|我正在为Outlook和Office365而苦苦挣扎。令人惊讶的是，似乎起作用的是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1032472|<table+align='center'+style='text-align:center'>
++<tr>
++++<td+align='center'+style='text-align:center'>
++++++
++++</td>
++</tr>
</table>|code-block|syntax|javascript|1032473|我只列出了解决我的Microsoft电子邮件问题的一些关键问题。|1032474|我可以补充说，构建一个在所有电子邮件上看起来都很漂亮的电子邮件是一件痛苦的事情。这个网站非常适合测试：https://putsmail.com/|offset|length|1032475|它允许您列出所有您想要发送测试电子邮件的电子邮件。您可以将代码直接粘贴到窗口中，进行编辑、发送和重新发送。这对我帮助很大。|1032476|entityMap|0|LINK|mutability|MUTABLE|url|https://putsmail.com/^0|0|0|0|1F|L|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|Z|8|@]|9|@$K|10|L|11|1|12]]|A|$]]|$1|M|3|N|5|6|7|13|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

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

<pre><code>&lt;table align='center' style='text-align:center'&gt;
  &lt;tr&gt;
    &lt;td align='center' style='text-align:center'&gt;
      &lt;!-- AMAZING CONTENT! --&gt;
    &lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;
</code></pre>

<p>I only listed some of the key things that resolved my Microsoft email issues.</p>

<p>Might I add that building an email that looks nice on all emails is a pain. This website was super nice for testing: <a href="https://putsmail.com/" rel="noreferrer">https://putsmail.com/</a></p>

<p>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.</p>


blocks|key|1032560|text|要将表格居中显示在电子邮件中间，请使用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1032561|<table+width="100%25"+align="center"+border="0"+cellspacing="0"+cellpadding="0">
++++<tr>
++++++++<td>
++++++++++++Your+Content
++++++++</td>
++++</tr>
</table>|code-block|syntax|javascript|1032562|要在中间对齐内容，请使用：|1032563|<table+width="100%25"+border="0"+cellspacing="0"+cellpadding="0">
++++<tr>
++++++++<td+align="center">
++++++++++++Your+Content
++++++++</td>
++++</tr>
</table>|1032564|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>To center the table in the middle of the email use</p>
<pre><code>&lt;table width=&quot;100%&quot; align=&quot;center&quot; border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;&gt;
    &lt;tr&gt;
        &lt;td&gt;
            Your Content
        &lt;/td&gt;
    &lt;/tr&gt;
&lt;/table&gt;
</code></pre>
<p>To align the content in the middle use:</p>
<pre><code>&lt;table width=&quot;100%&quot; border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;&gt;
    &lt;tr&gt;
        &lt;td align=&quot;center&quot;&gt;
            Your Content
        &lt;/td&gt;
    &lt;/tr&gt;
&lt;/table&gt;
</code></pre>


<p>I normally use CSS rules for <code>margin:0 auto</code> 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.</p>

<p><a href="http://static.helpcurenow.org/mockups/emails/2010/may-survey/survey.html" rel="noreferrer">http://static.helpcurenow.org/mockups/emails/2010/may-survey/survey.html</a></p>

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

<p>Is there a best practice for this?</p>


What's the best way to center your HTML email content in the browser window (or email client preview pane)?

容器

我通常使用margin:0 auto的CSS规则和一个960容器来处理我的基于浏览器的标准内容，但我是一个创建电子邮件的新手，我有以下的设计，现在我想在浏览器窗口居中而不使用标准的CSS。我似乎记得在某个地方看到过，也可以通过将您的电子邮件表设计包装在一个设置为width:100%的外部表中，并在tbody上使用一些t...

问在浏览器窗口(或电子邮件客户端预览窗格)中居中显示HTML电子邮件内容的最佳方式是什么？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在浏览器窗口(或电子邮件客户端预览窗格)中居中显示HTML电子邮件内容的最佳方式是什么？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在浏览器窗口(或电子邮件客户端预览窗格)中居中显示HTML电子邮件内容的最佳方式是什么？
EN