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 =＆＃34; middle＆＃34;被忽略，链接文本被推到顶部，如下所示：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

Align总是对我有用，但我认为要在Outlook 2007中工作，你必须设置＆lt;＆gt;的高度。这总是对我有用：

<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>

Answer 3

简答：使用填充顶部，填充底部使用负值。

答案很长：如果你想写一个交叉兼容的电子邮件，请不要使用valign。您遇到的问题源自其他地方，因为默认情况下，文本应垂直居中显示在单元格中。

将代码恢复到默认为中心的位置，无论您需要什么，都可以使用嵌套表，cellpadding，margin和padding来获取您想要的位置。

Answer 4

我有这个：

<table width="600" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="600" valign="middle">
        Content
    </td>
  </tr>
</table>

这适用于大多数电子邮件客户端，但不适用于大于2010的Outlook版本。要使其正常工作，只需添加条件注释，并使用以下间隔符：

<table width="600" border="0" cellpadding="0" cellspacing="0">
  <!-- In this case is a spacer of 40px -->
  <!--[if (gt mso 14)]>
  <tr>
    <td>
      <table border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td style="font-size: 40px; line-height: 40px;" bgcolor="#ffffff" width="100%" height="40" valign="top">
            &nbsp;
          </td>
        </tr>
      </table>
    </td>
  </tr>
  <![endif]-->
  <tr>
    <td width="600" valign="middle">
        Content
    </td>
  </tr>
</table>

Answer 5

这是因为在第一张表上设置了align="right"。删除它应该可以解决问题。另一种选择是在第一个<tr>之前手动添加间距。

<tr><td height="30>&nbsp;</td></tr>

Valign无法使用Outlook HTML电子邮件

5 个答案: