Button Text Alignment In Outlook.com

Finding a strange behavior only in outlook.com with a button text alignment for an email build. For some reason it's aligned to the top of the button instead of being in the middle

Solution 1:

I would first start off by reviewing this asset for anything "email" related in order to get an understanding of how different email clients react with CSS.

You will notice how display is not supported in Outlook which would result in your anchor tag not being able to use padding. I would recommend coding an email button the following way:

<tablecellpadding="0"cellspacing="0"border="0"><tbody><tr><tdalign="center"valign="middle"bgcolor="#989b98"style="padding: 12px 20px; font-family: 'Arial', Helvetica, sans-serif; font-size: 16px; font-weight: bold;"><ahref="#"style="color: #e4008f; text-decoration: none; outline: none; border: none;"target="_blank">16pxXXXX XXXXX XXXXX</a></td></tr></tbody></table>

This unfortunately only makes the text clickable and not the entire button, but it's going to be your best option in order to make it consistent across all other email clients without having to create an image.