Valign 在 Outlook HTML 电子邮件中不起作用

Question

所以我整个星期都在为我公司的时事通讯重新设计而争论不休，调整 html 以使其在电子邮件客户端中半一致地显示。我充分利用了 www.litmus.com 来完成大部分工作。这是剩下的最后一个错误，它继续让我望而却步。我们在顶部有一个水平导航栏。这是一个精简版，只有一个 <td> ，通常有 5 个：

 <table width="100%" border="0" align="right" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF" valign="middle">
    <tr valign="middle">
        <td valign="middle" align="center" style="font-family: 'Lucida Grande', Arial, sans-serif; font-size:12px; line-height: 200%; background-color:#b2382a; color: #FFFFFF; text-transform:uppercase;" >&nbsp;
            <a target="_blank" style="font-family: 'Lucida Grande', Arial, sans-serif; font-size:12px; line-height: 200%; background-color:#b2382a; color: #FFFFFF; text-transform:uppercase; text-decoration:none; vertical-align: middle;" href="LinkURLHere">
                <span style="color:#FFFFFF; vertical-align: middle;">Link Text Here</span>
            </a>&nbsp;
        </td>
    </tr>
</table>

如您所见，内联样式非常棒。它在除 Outlook 2002、2007 和 2013 之外的所有石蕊测试中都显示良好，其中 valign=“middle” 被忽略并且链接文本被推到顶部，如下所示：http: //i.imgur.com/a48ObB8 .jpg

这里和其他地方的几个来源表明 valign 在 outlook 中工作，但我已经尝试了 valign="middle" 我能想到的每个标签上的属性，以及几个 css vertical-align: middle; s .这不再是真的了吗？如果是这样，是否有某种解决方法？

原文由 aurath 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我认为问题是您设置的行高。我发现当 line-height 等于 td 高度时，valign=middle 在 outlook 中将无法正常工作。

以下不会使文本居中对齐：

 <table cellspacing="0" cellpadding="0" width="100%" border="0" align="right">
    <tr>
        <td align="center" valign="middle" bgcolor="#b2112a" height="48" style="font-size:20px; line-height:48px;">
            Link Text Here
        </td>
    </tr>
</table>

这会：

 <table cellspacing="0" cellpadding="0" width="100%" border="0" align="right">
    <tr>
        <td align="center" valign="middle" bgcolor="#b2112a" height="48" style="font-size:20px; line-height:24px;">
            Link Text Here
        </td>
    </tr>
</table>

原文由 Rudy Gagneron 发布，翻译遵循 CC BY-SA 3.0 许可协议