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

Question

I tried to use line-height in emails for Outlook 2016, however, it doesn't work as expected.

Email body is following:

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

This is how it behaves in a normal web browser:

And this is Outlook:

Answer 1

I have tried a solution and it proved to be working for me. I made use of 2 css properties,

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

This would make use of normal line height property for all the email clients and the outlook clients would make use of the -mso-line-height-alt property. You could make changes to the mentioned % to make your item centered in outlook client.

Answer 2

Looks like I found answer.

First of all, I used mso-line-height-rule: exactly;, but specified line-height in percents - that's not correct (need to have pt or px or anything else).

Secondly, looks like Outlook uses the same engine as Microsoft Word for processing HTML, so I can just create html files, and then open and edit them in Microsoft Word.

In Word I can play with Line Spacing Options dialog as long as I want. Basically, it has several useful options:

1. Spacing before paragraph.
2. Spacing after paragraph.
3. Line spacing.

Line spacing can have following options:

• Single
• 1.5 lines
• Double
• At least
• Exactly
• Multiple

Single, 1.5 lines, Double and Multiple are converted to line-height values: 100%, 150%, 200% and xxx% accordingly when saved.

At least I didn't play with long enough.

Exactly behaves slightly different from the others. See https://medium.com/@mattsamberg/line-spacing-explained-9aecda41f48d for details.

Basically, to get line-height like in browser, we can use:

• Exactly + positive margin-bottom (recommended)
• or Multiple + positive margin-top (can be used, but will have too much extra space)

Finally, we have this (recommended):

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

or

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

In Outlook there will be slightly more space than in browser (because we have line-height and margin-top/margin-bottom), but it's the best I could do.

Answer 3

Sometimes email clients will strip away inline styles from divs, even though (The Ultimate Guide to CSS https://www.campaignmonitor.com/css/) marks line-height as supported by Outlook 2007/10/13.

The old way of writing HTML for emails was by using tables.
It is also the safest way and the inline styling and attributes on tables will not get stripped away by email clients, which makes tables your best bet.
The community discussion here has a great answer as to why email HTML is still best written using table and not div. https://litmus.com/community/discussions/1443-why-is-it-still-recommended-to-use-tables-for-email-structure

To quote the answer by Rémi Parmentier, 2 years ago

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)

Anyways, try this.

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