如何垂直对齐图像和文本跨客户端电子邮件模板答案

【问题标题】：How to vertical align image and text cross client email templates如何垂直对齐图像和文本跨客户端电子邮件模板
【发布时间】：2011-05-22 04:53:56
【问题描述】：

<table cellspacing="0" cellpadding="0" border="0">
 <tbody>
   <tr>
     <td width="20">&nbsp;<img height="12" alt="" src="/CmpImg/2010/22677/924228_immunotec_bullet.gif" width="12"></td>
     <td valign="top"><span style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; PADDING-BOTTOM: 0px; COLOR: rgb(0,0,0); LINE-HEIGHT: 16px; PADDING-TOP: 0px; FONT-FAMILY: Arial; TEXT-ALIGN: left">Reliable service team, deployed to your location, at your convenience</span></td>
   </tr>
 </tbody>
</table>

我在 Outlook 中有上述代码。它显示正常，但在 Gmail、Yahoo 和 Hotmail 中，项目符号和文本在顶部没有垂直对齐，似乎文本顶部有填充。有什么想法吗？

【问题讨论】：

标签： html css html-email

【解决方案1】：

长话短说，在我今天下午进行的测试中，看起来 Outlook 支持 td 元素上的 valign 属性，但 gmail 和其他人想要垂直对齐 css 规则。 Gmail 只支持内联样式，不支持样式标签，所以你必须这样做：

<table>
  <tr>
    <td valign="top" style="vertical-align:top;"></td>
  </tr>
</table>

还要确保你声明了一个文档类型！确保它位于您的 <html> 元素之上：

<!DOCTYPE html>

【讨论】：

你实际上不需要 CSS，只需要 valign="top"
@John 是正确的，valign 属性是最好的，不要为此使用 CSS。

【解决方案2】：

使用此代码

<table cellspacing="0" cellpadding="0" border="0">
   <tbody>
   <tr>
   <td width="20" align="left" valign="top">&nbsp;<img height="12" alt="" src="/CmpImg/2010/22677/924228_immunotec_bullet.gif" width="12" align="top"></td>
   <td align="left" valign="top"><span style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; PADDING-BOTTOM: 0px; COLOR: rgb(0,0,0); LINE-HEIGHT: 16px; PADDING-TOP: 0px; FONT-FAMILY: Arial; TEXT-ALIGN: left">Reliable service team, deployed to your location, at your convenience</span></td>
   </tr>
   </tbody>
   </table>

【讨论】：

【解决方案3】：

首先，作为电子邮件的一般做法，您需要在所有图像上放置显示块，通常是边框：无。其次，您可能会遇到默认设置问题。在 td 上设置所有样式。如果我需要一些特定的间距，我会在 td 上将字体大小和行高设置为 1px 以避免继承。您可能还需要在您的第一个 td 上使用 valign top。我真的无法从描述中分辨出哪个部分没有排列。祝你的电子邮件好运。

【讨论】：