在Gmail中居中放置HTML电子邮件的正文

由于我正在撰写HTML电子邮件，因此我正在重新生活基于表格的布局的辉煌日子。不幸的是，我无法将主体放在页面的中心（当然，它在浏览器中工作，但在通过HTML Mails在Gmail中测试时没有）我希望嵌套在第一个<td>中的表位于。外部表内表被设置为一个固定的宽度，所以我早就预料到工作任何想法在Gmail中居中放置HTML电子邮件的正文

下面是完整的代码（fiddle）：？

<table width="100%"> 
<tr> 
    <td width="100%" align="center"> 
     <table width="600" height="100%"> 
      <tr> 
       <td width="100%"> 
        <table cellpadding="0" cellspacing="0"> 
         <tr> 
          <td> 
           <table cellpadding="0" cellspacing="0"> 
            <tr> 
             <td style="border-top: 1px solid #DFC6B2; border-bottom: 1px solid #DFC6B2;"> 
              <table cellpadding="0" cellspacing="0"> 
               <tr> 
                <td width="250" height="40" style="border-top: 1px solid #E30023; border-bottom: 1px solid #E30023;"></td> 
               </tr> 
              </table> 
             </td> 
            </tr> 
           </table> 
          </td> 
          <td> 
           <table cellpadding="0" cellspacing="0"> 
            <tr> 
             <td width="100" height="100"> 
              <img src="" width="100" height="100"> 
              </a> 
             </td> 
            </tr> 
           </table> 
          </td> 
          <td> 
           <table cellpadding="0" cellspacing="0"> 
            <tr> 
             <td style="border-top: 1px solid #DFC6B2; border-bottom: 1px solid #DFC6B2;"> 
              <table cellpadding="0" cellspacing="0"> 
               <tr> 
                <td width="250" height="40" style="border-top: 1px solid #E30023; border-bottom: 1px solid #E30023;"></td> 
               </tr> 
              </table> 
             </td> 
            </tr> 
           </table> 
          </td> 
         </tr> 
        </table> 
        <table cellpadding="20"> 
         <tr> 
          <td width="100%" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:13px;"> 
           <h1 align="left" style="font-weight:100;margin-top:20px;">Header</h1> 

           <p style="font-family: Georgia, serif;">Body</p> 
          </td> 
         </tr> 
        </table> 
        <table width="100%" cellpadding="0" cellspacing="0"> 
         <tr> 
          <td> 
           <table cellpadding="0" cellspacing="0"> 
            <tr> 
             <td width="275" height="1" style="border-top: 1px solid #DFC6B2;"></td> 
            </tr> 
           </table> 
          </td> 
          <td> 
           <table cellpadding="0" cellspacing="0"> 
            <tr> 
             <td width="50" height="50"> 
              <img src="" width="50" height="50" /> 
             </td> 
            </tr> 
           </table> 
          </td> 
          <td> 
           <table cellpadding="0" cellspacing="0"> 
            <tr> 
             <td width="275" height="1" style="border-top: 1px solid #DFC6B2;"></td> 
            </tr> 
           </table> 
          </td> 
         </tr> 
        </table> 
       </td> 
      </tr> 
     </table> 
    </td> 
</tr>

来源

2013-02-28 David Jones

背景颜色我不认为你需要对齐前两个表格单元格 – user1902540 2013-02-28 20:09:35

您想让文本与中心对齐吗？还是想让与其父div的中心对齐？ – Blenderer 2013-02-28 20:10:50

我想要嵌套在第一个''中的表格居中。我清理了一下代码，在浏览器中得到了相同的结果。 – 2013-02-28 20:15:30

当我检查Litmus时，你的代码工作正常。我唯一担心的是，您可能需要将“text-align：left”添加到以下内容中，以使副本与Gmail/IE上的左侧对齐。

<p style="font-family: Georgia, serif; text-align: left;">Body</p>

来源

2013-02-28 20:35:44 hmhcreative

有你尝试添加文本对齐css风格的身体的p元素？

<p style="font-family: Georgia, serif;text-align:center;">Body</p>

您正在将p放在单元格中，但不包含其内容。或者删除p标签。

来源

2013-02-28 20:15:11 Obsidian

对不起，我不清楚。我并没有试图将文本居中，我试图将嵌套在第一个“”中的表居中。我会在我的问题中更清楚地说明这一点。 – 2013-02-28 20:16:49

在这种情况下，所有的嵌套表是必要的吗？您不能将电子邮件模板创建为单个html表并使用列和行跨度吗？它会使代码少得多。 – Obsidian 2013-02-28 20:18:49

感谢您的建议，但经过进一步调查后，我发现Gmail实际上剥离了外表中的width="100%"属性。目前，我认为没有办法在Gmail窗口中将内容居中。

来源

2013-02-28 20:27:42

个人而言，我喜欢我的包裹整个身体的内容（甚至我在响应电子邮件手机版）100％的宽度表里面（的Gmail可能剥离它，但它无论如何都将承担100％）。诀窍是td的对齐中心。 EX-

<table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse:collapse; padding:0; margin:0px;"> 
    <tr valign="top"> 
     <td align="center"> 
      <table with whatever width you want your max width to be> 
     </td> 
    </tr> 
</table>

，你也可以指定一个bgcolor你的包装台，这将给你一个背景色为您的电子邮件，即使在网络邮件客户通常地带body

来源

2013-09-09 16:21:26 zazzyzeph

感谢它解决了我的问题！ – 2015-04-30 19:15:57

在Gmail中居中放置HTML电子邮件的正文

回答

相关问题