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

因此，我整周一直在为公司重新设计新闻稿，调整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>

如您所见，内联为wazoo设计了样式。在Outlook 2002、2007和2013之外的所有石蕊测试中，它都可以正常显示，其中valign =“middle”被忽略，链接文本被推到顶部，如下所示:http://i.imgur.com/a48ObB8.jpg

无论在这里还是在其他地方，都有一些资料表明valign在Outlook中可以工作，但是我已经在我能想到的每个标签上尝试了valign="middle"属性，还尝试了一些css vertical-align: middle;。这不再是真的吗？如果是这样，是否有某种解决方法？

最佳答案

我认为问题是您要设置的行高。我发现，当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>

关于html - Valign在Outlook HTML电子邮件中不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/16926941/