"line-height"で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

時々、電子メールクライアント

メール本文は以下の通りです

たとえ（ Tであっても）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

テーブルはまだ、今日使用されている主な理由は、Outlook 2007/2010/2013 をサポートすることです

2年前、レミパルメンティエで答えを引用します。これらのバージョンでは、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をサポートする必要がないと思われる場合は、テーブルを完全に破棄して、代わりに コードを使用してください。そして、たとえそれをサポートする必要があるとしても、単純な の1列のレイアウトは、テーブルなしで行うことができます。あなたの テンプレートは、Outlook 2011で動作する理由は、このバージョン（Mac用のみ） はとにかく（ただのSafariやApple Mailのように）

をWebKitのレンダリングエンジンを使用することで、これを試してみてください。

<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は、HTMLを処理するためにMicrosoft Wordと同じエンジンを使用するように見えるので、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（使用することができますが、あまりにも多くの余分なスペースを持っています最後に）

、我々は、この（）推奨されている：

Outlookで

または

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

（私たちは行の高さとマージントップ/マージン下を持っているので）、ブラウザに比べてわずかに多くのスペースがあるでしょうが、それは私が何ができるのが最善です。