Html 如何垂直对齐图像和文本跨客户端电子邮件模板
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4387378/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to vertical align image and text cross client email templates
提问by user1417094
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td width="20"> <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>
I have the above code in Outlook. It displays fine but in Gmail, Yahoo and Hotmail, the bullets and text do not align vertically on top, it seems like there is padding round the top of the text. Any ideas?
我在 Outlook 中有上述代码。它显示正常，但在 Gmail、Yahoo 和 Hotmail 中，项目符号和文本在顶部没有垂直对齐，似乎文本顶部有填充。有任何想法吗？
回答by David Meister
Long story short, in the testing that I've been doing this afternoon it looks like outlook supports the valign property on td elements but gmail and the rest want the vertical-align css rule. Gmail only supports inline styles, not style tags, so you have to do something like this:
长话短说，在我今天下午进行的测试中，看起来 Outlook 支持 td 元素上的 valign 属性，但 gmail 和其他人想要垂直对齐 css 规则。Gmail 仅支持内联样式，不支持样式标签，因此您必须执行以下操作：
<table>
<tr>
<td valign="top" style="vertical-align:top;"></td>
</tr>
</table>
Also make sure you declare a doctype! Make sure this is above your <html>element:
还要确保你声明了一个文档类型！确保这在您的<html>元素之上：
<!DOCTYPE html>
回答by Carlos
Use this code
使用此代码
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td width="20" align="left" valign="top"> <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>
回答by mikevoermans
First as a general practice with emails you'll want to put display block and typically border:none on all images. Secondly you might be running into trouble with defaults. Set all styles on the td's. If I need some specific spacing I'll set the font size and line height to 1px on the td to avoid inheritence. You might also need valign top on your first td. I can't really tell what part isn't lining up from the description. Good luck with your emails.
首先，作为电子邮件的一般做法，您需要在所有图像上放置显示块和通常的边框：无。其次，您可能会遇到默认设置的问题。在 td 上设置所有样式。如果我需要一些特定的间距，我会将 td 上的字体大小和行高设置为 1px 以避免继承。您可能还需要在第一个 td 上使用 valign top。我真的无法从描述中分辨出哪个部分没有排列。祝你的电子邮件好运。
