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

user_751200 0
Viewed 3500

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: expected result

And this is Outlook:

actual result

email-templates outlook css email
3 Answers

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.

user_60818010
Related