文本在 Outlook 中未垂直居中 "line-height"

Question

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

电子邮件正文如下：

<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>

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

这是 Outlook：

Answer 1

有时电子邮件客户端会从 div 中删除内联样式，即使（CSS https://www.campaignmonitor.com/css/ 的终极指南）标记 line-height受 Outlook 2007/10/13 支持。

为电子邮件编写 HTML 的旧方法是使用表格。
这也是最安全的方式，并且表格上的内联样式和属性不会被电子邮件客户端剥离，这使表格成为您的最佳选择。
关于为什么电子邮件 HTML 仍然最好使用 table 而不是 div 编写，这里的社区讨论有一个很好的答案。 https://litmus.com/community/discussions/1443-why-is-it-still-recommended-to-use-tables-for-email-structure

引用 Rémi Parmentier 2 年前的回答

The main reason tables are still used nowadays is to support Outlook 2007/2010/2013. Those versions use Microsoft Word engine to render HTML, and it's quite a mess. It has a limited support for CSS (no float or position for example), and some CSS properties are only supported on some specific HTML elements. For example, padding is supported on a <td>, but not on a <div>. And even when you could theorically use padding on more semantical elements (like <h1> tags), or use margin on <div> elements instead, Word's rendering engine is still massively bugged and can have unpredictable behavior with such HTML and CSS code. Thus, developers find it easier to just use <table> instead. You can read more about Outlook HTML and CSS support here.

But here's the thing : if you don't feel like you need to support Outlook 2007/2010/2013, then you can absolutely ditch tables and use better code instead. And even if you need to support it, simple one-column layouts can be done without tables. The reason your template works in Outlook 2011 is that this version (for Mac only) uses WebKit rendering engine (just like in Safari or Apple Mail)

无论如何，试试这个。

<table>
  <tbody>
    <tr>
      <td 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 </td>
    </tr>
    <tr>
      <td 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 </td>
    </tr>
    <tr>
      <td 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 </td>
    </tr>
    <tr>
      <td 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 </td>
    </tr>
    <tr>
      <td 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 </td>
    </tr>
  </tbody>
</table>

Answer 2

看来我找到了答案。

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

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

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

段前间距。
段后间距。
行间距。

行距可以有以下选项：

单身
1.5 行
双人间
至少
正是
多个

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

At least我玩的时间不够

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

基本上，要在浏览器中获得 line-height，我们可以使用：

Exactly+正数margin-bottom（推荐）
或Multiple+正margin-top（可以用，但会多出太多space）

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

<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 中 space 会比在浏览器中稍微多一些（因为我们有行高和 margin-top/margin-bottom），但这是我能做的最好的了。

Answer 3

我已经尝试了一个解决方案，事实证明它对我有用。我使用了 2 css 个属性，

-mso-line-height-rule: exactly;
-mso-line-height-alt: 120%;

这将对所有电子邮件客户端使用正常行高属性，而 outlook 客户端将使用 -mso-line-height-alt 属性。您可以更改上述百分比，使您的项目在 Outlook 客户端中居中。

文本在 Outlook 中未垂直居中 "line-height"

Text is not vertically centered in Outlook with "line-height"

css

email

outlook

email-templates