文本在 Outlook 中没有垂直居中，带有“行高”

Question

我尝试在 Outlook 2016 的电子邮件中使用 line-height，但是，它没有按预期工作。

电子邮件正文如下：

<div style="padding:0px;margin:0px;margin-auto:0px;mso-line-height-rule: exactly;line-height:500%;font-size:11pt;border-top:1px solid black;">paragraph text1</div>
<div style="padding:0px;margin:0px;margin-auto:0px;mso-line-height-rule: exactly;line-height:500%;font-size:11pt;border-top:1px solid black;">paragraph text2</div>
<div style="padding:0px;margin:0px;margin-auto:0px;mso-line-height-rule: exactly;line-height:500%;font-size:11pt;border-top:1px solid black;">paragraph text3</div>
<div style="padding:0px;margin:0px;margin-auto:0px;mso-line-height-rule: exactly;line-height:500%;font-size:11pt;border-top:1px solid black;">paragraph text4</div>
<div style="padding:0px;margin:0px;margin-auto:0px;mso-line-height-rule: exactly;line-height:500%;font-size:11pt;border-top:1px solid black;">paragraph text5</div>

这是它在普通 Web 浏览器中的行为方式：

这是 Outlook：

Answer 1

看来我找到了答案。

首先，我使用了mso-line-height-rule: exactly;，但line-height以百分比指定 - 这是不正确的（需要有pt或px或其他任何东西）。

其次，看起来 Outlook 使用与 Microsoft Word 相同的引擎来处理 HTML，因此我可以创建 html 文件，然后在 Microsoft Word 中打开和编辑它们。

Line Spacing Options在Word 中，我可以随心所欲地使用对话框。基本上，它有几个有用的选项：

1. 段落前的间距。
2. 段落后的间距。
3. 行间距。

行距可以有以下选项：

• 单身的
• 1.5线
• 双倍的
• 至少
• 确切地
• 多种的

Single保存时，、1.5 lines、Double和相应地Multiple转换为值：100%、150%、200% 和 xxx%。line-height

At least我玩的时间不够长。

Exactly行为与其他人略有不同。有关详细信息，请参阅https://medium.com/@mattsamberg/line-spacing-explained-9aecda41f48d。

基本上，为了line-height像在浏览器中一样，我们可以使用：

• Exactly+ 积极margin-bottom（推荐）
• 或Multiple+ 正数margin-top（可以使用，但会产生太多额外空间）

最后，我们有这个（推荐）：

<table>
  <tbody>
    <tr>
      <td style="border-top:1px solid black;mso-line-height-rule:exactly;line-height:50px;font-size:11px;">
        <!--[if mso]><p style="margin-bottom:24px;"><![endif]-->
        paragraph text1
        <!--[if mso]></p><![endif]-->
      </td>
    </tr>
  </tbody>
</table>

或者

<table>
  <tbody>
    <tr>
      <td style="border-top:1px solid black;line-height:500%;font-size:11px;">
        <!--[if mso]><p style="margin-top:50px;"><![endif]-->
        paragraph text1
        <!--[if mso]></p><![endif]-->
      </td>
    </tr>
  </tbody>
</table>

在 Outlook 中，空间会比浏览器中稍多一些（因为我们有行高和上边距/下边距），但这是我能做的最好的了。