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:

Did you have a look at [this](https://stackoverflow.com/questions/39143932/text-in-outlook-doesnt-use-line-height)? — Ivan, Aug 04 '17 at 13:10
Possible duplicate of [Text in Outlook doesn't use line-height](https://stackoverflow.com/questions/39143932/text-in-outlook-doesnt-use-line-height) — Ivan, Aug 04 '17 at 13:10
Not a duplicate. `line-height` is obviously used by Outlook but in a wrong way. — kolobok, Aug 04 '17 at 13:29

Ricky Dam · Answer 1 · 2017-08-04T13:25:52.420

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>

No, it doesn't work. I used putsmail to send your html to my email - looks the same as in my screenshots. — kolobok, Aug 04 '17 at 13:26
@kolobok Why can't you just use the `table` built-in `height` attribute? That one will definitely work. — Ricky Dam, Aug 04 '17 at 13:27
@kolobok I see. Sorry, I tried. I checked with Outlook Web using putsmail and it worked there. And I don't have Outlook for Desktop so that's the best I could do. Good luck! — Ricky Dam, Aug 04 '17 at 13:37
@kolobok How about adding attribute `valign = "middle"` to the `td`? Maybe `line-height` does work, but just not for the first line? Have you tried a multi-line `td`? — Ricky Dam, Aug 04 '17 at 13:45
Yes I tried all of this. I played with MS Word a little and found answer that is satisfiable for me. — kolobok, Aug 04 '17 at 15:15

kolobok · Accepted Answer · 2017-08-04T15:29:08.120

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:

Spacing before paragraph.
Spacing after paragraph.
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.

A very nicely detailed answer for a good question! Good stuff! — Ricky Dam, Aug 04 '17 at 15:19
Saw this question and answers late. My 2 cents on the idea above: I place line height always as pixels and use padding on td's (percentages are not fun enough). If you check the HTML against the design Outlook creates a 4px gap around text. If you like pixel perfect emails then its just matter of reducing padding to accommodate the space. — Syfer, Aug 05 '17 at 10:56

score 0 · Answer 3 · answered Oct 22 '19 at 09:26

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.

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

3 Answers3