Html Outlook 中的垂直文本对齐不居中 [带图片]
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19980584/
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
Vertical text alignment in outlook not centering [with pictures]
提问by user2619611
I'm currently trying to sort out some problems with a html email that renders fine in browsers and through gmail but unfortunately I'm having problems in outlook vertically aligning the text (it sticks to the bottom part).
我目前正在尝试解决在浏览器和通过 gmail 中呈现良好的 html 电子邮件的一些问题，但不幸的是我在 Outlook 垂直对齐文本时遇到了问题（它粘在底部）。
This image shows you what's wrong:
这张图告诉你出了什么问题：
<td align="center" style="font-size:17px;font-weight:bold;line-height:62px;"><a href="url" style="text-decoration:none;color:#000001;">THE WORLD'S BEST BRANDS</a></td>
</tr>
<tr>
<td align="center"><a href="url" style="color:#000001;text-decoration:none;"><img src="url" alt="XXXX" width="593" height="100" class="brandsimage" style="display:block;border:0;" /></a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" style="font-size:17px;font-weight:bold;line-height:72px;"><a href="url" style="text-decoration:none;color:#000001;">ESSENTIALS</a></td>
</tr>
Any idea how to fix this?
知道如何解决这个问题吗？
回答by John
Add valign="middle"and a height to the <td>you want the text vertically centered on:
添加valign="middle"一个高度到<td>您希望文本垂直居中的位置：
<tr>
<td align="center" valign="middle" height="100" style="font-size:17px;font-weight:bold;line-height:72px;">
<a href="url" style="text-decoration:none;color:#000001;">ESSENTIALS</a>
</td>
</tr>
In html email, always use,
在 html 电子邮件中，始终使用，
valign="top|middle|bottom"for vertical alignment and
valign="top|middle|bottom"用于垂直对齐和
align="left|center|right"for horizontal alignment.
align="left|center|right"用于水平对齐。
Just remember you need height=""or width=""set on the same <td>element.
只要记住你需要height=""或width=""设置在同一个<td>元素上。
回答by user07
For me to make it work, important was to specify heightand align="center"as HTML properties and duplicate heightin CSS styleelement.
对于我来说，重要的是指定height和align="center"作为 HTML 属性并height在 CSSstyle元素中重复。
<td colspan="3" align="center" height="80px" width="100%"
style="font-family: Arial, Helvetica, sans-serif; font-size: 14px;
color:#666666; height: 80px; background: #cccccc;
padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
<strong>for internal use</strong>
</td>Alignment issue was seen for all Word based Outlooks (2007 - 2016).
所有基于 Word 的 Outlook（2007 - 2016）都存在对齐问题。
