11

因此，我整个星期都在为我的公司重新设计时事通讯而争论不休，调整 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;。这不再是真的了吗？如果是这样，是否有某种解决方法？

4

5 回答 5

7

我认为问题在于您设置的行高。我发现当 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>
于 2014-05-21T18:16:34.523 回答
5

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>
于 2013-09-20T13:22:28.220 回答
2

简短回答：使用 padding-top 和 padding-bottom 与负值。

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

将您的代码恢复到默认为中心的位置，并且无论您需要什么不同的地方，都可以使用嵌套表格、单元格填充、边距和填充来获得所需的位置。

于 2014-01-07T08:20:00.387 回答
1

这是因为align="right"第一张桌子上的设置。删除它应该可以解决问题。其他选项是在第一个<tr>.

<tr><td height="30>&nbsp;</td></tr>
于 2019-10-09T06:31:14.557 回答
0

我有这个：

<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>
于 2016-05-18T15:44:13.200 回答