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

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>