电子邮件模板中心对齐徽标旁边的文本

问题描述：

我正在为电子邮件模板创建下面显示的标头。正如你所看到的，文本与电子邮件的中心略有偏移。发生这种情况是因为我有两个表格单元格：一个用于徽标，另一个用于文本。我可以将文本居中在其单元中，但由于徽标单元格占用了74个像素，所以该单元格不是100％的宽度。我可以在大多数电子邮件客户端使用margin-left将标题左移，但Outlook和Gmail都不支持页边距，我需要同时支持这两个客户端。我如何才能在Outlook和Gmail中获取文本？电子邮件模板中心对齐徽标旁边的文本

<body style="padding:0; margin:0"> 
    <table border="0" cellpadding="0" cellspacing="0" style="margin: 0; padding: 0; padding-top: 25px;" width="100%"> 
    <tr> 
     <td align="center" valign="top"> 
     <table border="0" cellpadding="0" cellspacing="0" style="margin: 0; padding: 0; min-height:76px;" width="600px" class="100p"> 
      <tr> 
      <td background="http://s3-us-west-2.amazonaws.com/sheldon-welcome-email/header.png" bgcolor="#39B491" width="600px" valign="top" class="100p"> 
       <!--[if gte mso 9]> 
       <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:76px;"> 
       <v:fill type="tile" src="http://s3-us-west-2.amazonaws.com/sheldon-welcome-email/header.png" color="#39B491" /> 
       <v:textbox inset="0,0,0,0"> 
       <![endif]--> 
       <div> 
       <table border="0" cellpadding="0" cellspacing="0" width="100%" class="100p"> 
        <tr> 
        <td width="74px" align="center" style="padding-top: 10px;"> 
         <div style="width:44px"> 
         <img src="http://s3-us-west-2.amazonaws.com/sheldon-welcome-email/my-id-care-logo.png" height="52px" width="44px" class="100p" /> 
         </div> 
        </td> 
        <td width="*%" align="center"> 
         <h3 style="color: white; font-size: 14px; margin: 0px; margin-left: -44px; margin-top: 10px; padding: 0px;"><font face="'Roboto', Arial, sans-serif">Welcome to MyIDCare</font></h3> 
         <h1 style="color: white; font-size: 20px; margin: 0px; margin-left: -44px; padding: 0px;"><font face="'Roboto', Arial, sans-serif">LET'S GET STARTED</font></h1> 
        </td> 
        </tr> 
       </table> 
       </div> 
       <!--[if gte mso 9]> 
       </v:textbox> 
       </v:rect> 
       <![endif]--> 
      </td> 
      </tr> 
     </table> 
     </td> 
    </tr> 
    </table> 
</body>

答

我花了一些时间来理解你的问题，但我认为我得到了它。无论徽标在哪里，您都希望将文字居中放在外部表格中，对吗？如果是的话，那么它只是在文本右侧添加另一个74px的块。

的代码有一个看看，看看我做了什么：

<table border="0" cellpadding="0" cellspacing="0" style="margin: 0; padding: 0; padding-top: 25px;" width="100%"> 
 
    <tr> 
 
     <td align="center" valign="top"> 
 
     <table border="0" cellpadding="0" cellspacing="0" style="margin: 0; padding: 0; min-height:76px;" width="600px" class="100p"> 
 
      <tr> 
 
      <td background="http://s3-us-west-2.amazonaws.com/sheldon-welcome-email/header.png" bgcolor="#39B491" width="600px" valign="top" class="100p"> 
 
       <!--[if gte mso 9]> 
 
       <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:76px;"> 
 
       <v:fill type="tile" src="http://s3-us-west-2.amazonaws.com/sheldon-welcome-email/header.png" color="#39B491" /> 
 
       <v:textbox inset="0,0,0,0"> 
 
       <![endif]--> 
 
       <div> 
 
       <table border="0" cellpadding="0" cellspacing="0" width="100%" class="100p"> 
 
        <tr> 
 
        <td width="74px" align="center" style="padding-top: 10px;"> 
 
         <div style="width:44px"> 
 
         <img src="http://s3-us-west-2.amazonaws.com/sheldon-welcome-email/my-id-care-logo.png" height="52px" width="44px" class="100p" /> 
 
         </div> 
 
        </td> 
 
        <td width="*%" align="center"> 
 
         <h3 style="color: white; font-size: 14px; margin: 0px; margin-top: 10px; padding: 0px;"><font face="'Roboto', Arial, sans-serif">Welcome to MyIDCare</font></h3> 
 
         <h1 style="color: white; font-size: 20px; margin: 0px; padding: 0px;"><font face="'Roboto', Arial, sans-serif">LET'S GET STARTED</font></h1> 
 
        </td> 
 
        <td width="74px" align="center">&nbsp; 
 
        </td> 
 
        </tr> 
 
       </table> 
 
       </div> 
 
       <!--[if gte mso 9]> 
 
       </v:textbox> 
 
       </v:rect> 
 
       <![endif]--> 
 
      </td> 
 
      </tr> 
 
     </table> 
 
     </td> 
 
    </tr> 
 
    </table>

干杯

是啊，这是一个很好的解决方案！我添加了一个' '最后一个表格单元格，因为有些客户端折叠了空白表格单元格。但这是一个坚实的技术。 –

实际上，我已经移除了nbsp。如果其中一个td具有内容，其他人将拥有其身高。 – Syfer

电子邮件模板中心对齐徽标旁边的文本

相关推荐