如何在sendgrid中居中电子邮件正文的内容

时间:2017-09-05 14:12:48

标签: html css sendgrid

我正在使用发送网格创建新闻简报的电子邮件模板,我设计了它,当我发送测试电子邮件时,它总是不适合电子邮件正文,如下图False Image所示,任何人都可以帮助我如何将电子邮件正文中的内容集中在一起?

编辑1:问题似乎只在Outlook中

<style type="text/css">
    body {
      min-width: 100%;
      margin: 0;
      padding: 0;
      -webkit-font-smoothing: anyialiased;
      font-family: Trebuchet MS;
    }
    span {
      color:#808080;
      font-size:12px;
    }
    img {
      display: inline-block;
      max-width: 100%;
      max-height: 100%;
    }
    table {
        border-collapse: collapse;
        }

  </style>

<!--Main Container-->
<table border="" cellpadding="0" cellspacing="0" width="100%" class="wrapper">
<tbody>
  <tr>
    <td valign="top" width="600">
        <!--First Table-->
                <table border="0" cellpadding="0" cellspacing="0" class="devicewidth">
                    <tbody>
                        <tr>
                            <td valign="top">
                              <!--Content-->
                            </td>
                            <td valign="top">
                              <!--Content-->
                            </td>
                            <td valign="top">
                              <!--Content-->
                            </td>
                            <td valign="top">
                              <!--Content-->
                            </td>
                            <td valign="top">
                              <!--Content-->
                            </td>
                            <td valign="top">
                              <!--Content-->
                            </td>
                      </tr>
                  </tbody>
                </table>
    </td>
  </tr>
</tbody>
</table>
<!--End of Main Container-->

False image

1 个答案:

答案 0 :(得分:0)

非常确定它应该适用于所有时事通讯/模板系统(我自己使用Mailchimp)。您的代码基本上缺少垂直中心&#39;。

希望以下片段解释!

&#13;
&#13;
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="backgroundTable" style="background-color:red;height:200px;">
	<tr>
    <!-- THIS <td> element needs align center!! -->
    <td align="center" valign="top" >

      <table border="0" cellpadding="0" cellspacing="0" width="200" class="templateContainer" style="background-color:white;height:100%;">
				<tr>
					<td>
           content goes here
         </td>
       </tr>
     </table>
   </td>
   </tr>
</table>
&#13;
&#13;
&#13;