Valign无法使用Outlook HTML电子邮件

Question

因此,我整整都在为我的公司重新设计时事通讯,调整html以使其在电子邮件客户端中半连续显示.我很好地利用了www.litmus.com的大部分内容.这是剩下的最后一个bug,它仍然无法避开.我们在顶部有一个水平导航栏.这是一个只有一个的精简版本<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;.这不再是真的吗？如果是这样,是否有某种类型的工作？

Answer 1

我认为问题是你设置的行高.我发现当行高等于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>

Answer 2

Valign 总是对我有用，但我认为它要在 Outlook 2007 中工作，您必须设置 <td> 的高度。这总是对我有用：

<table cellspacing="0" cellpadding="0" width="100%" border="0" align="right">
    <tr>
        <td align="center" valign="middle" bgcolor="#b2382a" height="35">
            <span style="color:#FFFFFF; 
                         font-family: 'Lucida Grande', Arial, sans-serif;
                         font-size:12px;
                         text-transform:uppercase;">
                Link Text Here
            </span>
        </td>
    </tr>
</table>