Html 如何垂直对齐跨客户端电子邮件模板的图像和文本可靠的服务团队，部署在您方便的位置_Html_Css_Html Email

Html 如何垂直对齐跨客户端电子邮件模板的图像和文本可靠的服务团队，部署在您方便的位置

html css

Html 如何垂直对齐跨客户端电子邮件模板的图像和文本可靠的服务团队，部署在您方便的位置,html,css,html-email,Html,Css,Html Email,我在Outlook中有上述代码。它显示得很好，但在Gmail、Yahoo和Hotmail中，项目符号和文本在顶部没有垂直对齐，似乎文本顶部有填充物。有什么想法吗？首先，作为电子邮件的一般做法，您需要在所有图像上放置显示块，通常为边框：无。其次，您可能会遇到默认设置的问题。设置td上的所有样式。如果我需要一些特定的间距，我会在td上将字体大小和行距设置为1px，以避免继承。您可能还需要在第一个td上使用valign top。我真的无法从描述中看出哪个部分没有排列。祝你的电子邮件好运。长话短说，在我

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

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

长话短说，在我今天下午进行的测试中，outlook似乎支持td元素的valign属性，但gmail和其他人希望使用垂直对齐css规则。Gmail只支持内联样式，不支持样式标记，因此您必须执行以下操作：

<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>

还要确保您声明了doctype！确保这在

元素上方：

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

使用此代码

<!DOCTYPE html>


可靠的服务团队，部署在您方便的位置

您实际上不需要CSS，只需要

valign=“top”

@John是正确的，

valign

属性是最好的，不要为此使用CSS。

<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>