HTML电子邮件文本垂直对齐

Question

我目前遇到一个问题，与奇怪的（好吧，html电子邮件……）垂直显示有关，让我很烦恼。

基本上，我有一个表格：左边是文本，右边是图像。问题是文本垂直对齐到顶部。我已经尝试了valign="middle"、css vertical-align:middle;，甚至line-height:value;也没用。图像实际上在那个TD的顶部（TD高度与图像相同）。以下是代码：

<table border="0" cellpadding="0" cellspacing="0" width="600" id="header">
<tr>    
<td border="0" cellpadding="0" cellspacing="0" width="600" align="left" valign="middle" style="text-transform: uppercase;font-family: tahoma,geneva,sans-serif;font-size: 14px;color: #898989;letter-spacing: 2px;">
<strong>Text field</strong>
<img src="link_to_image.jpg" style="display:block;" align="right" valign="bottom" width="230" height="49" alt="Logo">
</td>
</tr>
</table>

我需要在同一个TD中同时显示图像和文本，否则该图像与下方另一幅图像之间会有空格。

是否有其他人遇到过类似的问题？ 有什么想法吗？

谢谢， Baseckas

- Baseckas

---

将 td 划分为两列不是选项吗？ - defau1t

Answer 1

虽然在浏览器中可以正常工作，但由于它是一个HTML电子邮件，您需要将表格单元格分成两列，一列放置文本，另一列放置图像。这是Outlook正确解释它的唯一方法。您可以尝试在图像标记周围添加div，但这对Outlook来说仍然存在缺陷。

- defau1t

---

添加文本的div会给予更多的垂直空间（这不是我需要的），padding或margin都没有帮助。我开始进行这个深度解决方案的原因是Outlook（因为图像之间的空间）。问题是，这种对齐必须是精确的，因为该图像是下面图像的一部分。将表格单元格分成两个会弄乱它，这是我想要避免的。无论如何，感谢您的回答。 - Baseckas

如果将td分成两列会导致问题，请检查您的代码是否存在其他错误。在我看来，将td分成2列是唯一可行的方法。 - defau1t

谢谢建议。我会研究一下的。至少现在我知道了工作的方法。 - Baseckas

这只是HTML电子邮件世界中又一个令人沮丧的事件。当前情况比浏览器战争的高峰期还要糟糕，因为现在没有脚本可以帮助你解决问题。在我看来，Outlook开发人员应该受到一些体面的批评，因为他们重新引入了可怕的Word渲染引擎。关于主题：两列表对我很有用，但我私下里仍然希望找到另一种不那么费力的方法。 - Grimace of Despair