Valign 在 Outlook HTML 电子邮件中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16926941/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Valign not working in Outlook HTML Emails
提问by aurath
So I've been wrangling all week with a newsletter redesign for my company, tweaking the html to make it display semi-consistently across email clients. I've made good use of www.litmus.com for much of this. This is the last bug remaining and it continues to elude me. We have a horizontal navbar across the top. Here's a stripped down version with only one <td>, normally there are 5 of them:
所以我整个星期都在为我的公司重新设计时事通讯而争论不休，调整 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;" >
<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>
</td>
</tr>
</table>
As you can see, inline styles up the wazoo. It displays fine on all of the litmus tests except for Outlook 2002, 2007 and 2013, in which valign="middle" gets ignored and the link text gets pushed to the top like this: http://i.imgur.com/a48ObB8.jpg
如您所见，内联样式使 wazoo 更上一层楼。它在除 Outlook 2002、2007 和 2013 之外的所有石蕊测试中都显示良好，其中 valign="middle" 被忽略并且链接文本被推到顶部，如下所示：http: //i.imgur.com/a48ObB8 .jpg
Several sources, both here and elsewhere, suggest that valign works in outlook, but I've tried the valign="middle"attribute on every tag I can think of, and several css vertical-align: middle;s as well. Is this no longer true? And if so, is there a work around of some sort?
这里和其他地方的几个来源表明 valign 在 Outlook 中有效，但我已经valign="middle"在我能想到的每个标签上尝试了该属性，还有几个 css vertical-align: middle;。这不再是真的吗？如果是这样，是否有某种解决方法？
回答by Rudy Gagneron
I think the issue is the line-height you are setting. I found that when the line-height is equal to the td height, valign=middle will not work properly in outlook.
我认为问题在于您设置的行高。我发现当 line-height 等于 td 高度时， valign=middle 在 Outlook 中将无法正常工作。
The following will not middle-align the text:
以下内容不会使文本居中对齐：
<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>
THIS WILL:
这会：
<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>
回答by Sboniso Marcus Nzimande
Valign always worked for me, but I think for it to work in Outlook 2007 you have to set the height of your <td>. This always worked for me:
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>
回答by Biyan
This is because of the align="right"set on the first table. Removing this should fix the issue. Other option is to manually add spacing before the first <tr>.
这是因为align="right"第一张桌子上的设置。删除它应该可以解决问题。其他选项是在第一个之前手动添加间距<tr>。
<tr><td height="30> </td></tr>
回答by davidcondrey
Short answer: Use padding-top, and padding-bottom with a negative value.
简短回答：使用 padding-top 和 padding-bottom 为负值。
Long answer: If you want to write a cross-compatible email don't use valign at all. The problem your having is stemming from somewhere else because by default the text should be displaying vertically centered in the cell.
长答案：如果你想写一封交叉兼容的电子邮件，根本不要使用 valign。您遇到的问题来自其他地方，因为默认情况下，文本应该在单元格中垂直居中显示。
Get your code back to a point where it's defaulting to the center and wherever you need something different use nested tables, cellpadding, margin, and padding to get the placement your looking for.
将您的代码恢复到默认为中心的点，并且在您需要不同的地方使用嵌套表、单元格填充、边距和填充来获得您要查找的位置。
回答by tupini07
I have this:
我有这个：
<table width="600" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="600" valign="middle">
Content
</td>
</tr>
</table>
This works on most of email clients, but not on Outlook version greater than 2010. To make it work correctly just add a conditional comment with a spacer like this:
这适用于大多数电子邮件客户端，但不适用于 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">
</td>
</tr>
</table>
</td>
</tr>
<![endif]-->
<tr>
<td width="600" valign="middle">
Content
</td>
</tr>
</table>
