文字不是以“行高”在Outlook中垂直居中

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> 

这是它的行为在一个正常的网页浏览器：

这是展望：

Answer 1

有时电子邮件客户端将剥离div的内联样式，即使（T他终极指南CSShttps://www.campaignmonitor.com/css/）标记为line-height由Outlook 2007/10/13支持。

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

引述由雷米帕门蒂尔，2年前

的主要原因表依然采用了时下是支持Outlook 2007/2010/2013答案。这些版本使用Microsoft Word引擎来渲染HTML，这是相当糟糕的。它对CSS的支持有限（例如，没有 float或position），并且某些CSS属性仅支持某些特定HTML元素的 。例如，在<td>上支持的填充为 ，但不在<div>上支持。甚至当你可以 theorically使用padding更多的语义元素（如<h1>标签）， 或<div>元素使用margin相反，Word渲染引擎是 仍然大量窃听，可以有这样的 HTML和CSS代码不可预知的行为。因此，开发人员更容易仅使用<table> 代替。 You can read more about Outlook HTML and CSS support here。

但事情是这样的：如果您觉得您不需要支持 Outlook 2007/2010/2013，那么您可以绝对放弃表并使用 更好的代码。即使你需要支持它，简单的 单列布局也可以在没有表的情况下完成。您 模板在展望2011年工作的原因是（仅适用于Mac）这个版本 使用的WebKit渲染引擎（就像在Safari或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. 段落之间的间距。
2. 段后间距。
3. 行间距。

行距可以有以下选择：

• 单
• 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（可以使用，但有太多的额外空间）

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

<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中会有比在浏览器稍多的空间（因为我们有行高和边距/下边距），但它是我能做到的最好。