Outlook HTML按钮文本垂直居中失效，求简易修复方案

我使用Litmus的「防弹按钮」方案（通过VML/HTML实现全可点击按钮），按钮在标准HTML环境下显示正常，但在Outlook中文本始终无法垂直居中。尝试过调整line-height、手动设置高度、Outlook专属对齐技巧及mso私有样式等方法，均未解决问题，求简易修复方案。

原按钮代码：

<table width="100%">
<tr>
<td align="center" height="50px" width="120px">
    <!--[if mso]>
        <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" rel="noopener" target="_blank" href="https://redactedforprivacy.com" style="height:50px;v-text-anchor:middle;width:120px;" arcsize="10%" stroke="f" fillcolor="#FF0000">
        <w:anchorlock/>
        <center>
    <![endif]-->
    <a rel="noopener" target="_blank" href="https://redactedforprivacy.com" style="background-color:rgba(255, 0, 0, 1);border-radius:5px;color:#ffffff;display:block;font-size: 18px; font-family: Helvetica, Arial, sans-serif;font-weight:bold;height:50px;mso-line-height-rule:exactly;line-height:50px;text-decoration:none;width:120px;-webkit-text-size-adjust:none;">Pay Now</a>
    <!--[if mso]>
        </center>
        </v:roundrect>
    <![endif]-->
</td>
</tr>
</table>

修复方案 #

Outlook（基于Word渲染的版本）会将VML和HTML的样式完全隔离，HTML部分的line-height无法作用到VML内部的文本。只需在VML块的<center>标签中添加垂直对齐相关的内联样式即可：

1. 修改VML中的<center>标签，添加style="line-height:50px; mso-line-height-rule:exactly; margin:0;"
2. 确保VML的v-text-anchor:middle属性保留（已有）

修改后的完整代码：

<table width="100%">
<tr>
<td align="center" height="50px" width="120px">
    <!--[if mso]>
        <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" rel="noopener" target="_blank" href="https://redactedforprivacy.com" style="height:50px;v-text-anchor:middle;width:120px;" arcsize="10%" stroke="f" fillcolor="#FF0000">
        <w:anchorlock/>
        <center style="line-height:50px; mso-line-height-rule:exactly; margin:0;">
    <![endif]-->
    <a rel="noopener" target="_blank" href="https://redactedforprivacy.com" style="background-color:rgba(255, 0, 0, 1);border-radius:5px;color:#ffffff;display:block;font-size: 18px; font-family: Helvetica, Arial, sans-serif;font-weight:bold;height:50px;mso-line-height-rule:exactly;line-height:50px;text-decoration:none;width:120px;-webkit-text-size-adjust:none;">Pay Now</a>
    <!--[if mso]>
        </center>
        </v:roundrect>
    <![endif]-->
</td>
</tr>
</table>

原理说明 #

• v-text-anchor:middle是VML专属的垂直对齐属性，但仅靠它不足以解决文本居中问题，需要配合与按钮高度一致的line-height
• mso-line-height-rule:exactly强制Outlook忽略字体自带的行距，严格按照设置的line-height渲染，避免文本偏移
• VML内部的容器样式需要单独设置，无法继承HTML部分的样式，这是Outlook渲染机制导致的

内容的提问来源于stack exchange，提问作者eschga