文字不是以「行高」在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中會有比在瀏覽器稍多的空間（因爲我們有行高和邊距/下邊距），但它是我能做到的最好。