Middle-aligning text not working in Outlook HTML

224 Views Asked by At

I've followed many a tutorial on the internet and even more Stack Overflow answers, but none of them seem to work for me. I have a button that I mostly copied from Litmus for a "bulletproof button" using VML/HTML for a fully clickable button. Here's my code:

<table width="100%">
<tr>
<td align="center" height="50px" width="120px">
    <!--[if mso]>
        <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" rel="noopener" target="_blank" href="https://redactedforprivacy.com" style="height:50px;v-text-anchor:middle;width:120px;" arcsize="10%" stroke="f" fillcolor="#FF0000">
        <w:anchorlock/>
        <center>
    <![endif]-->
    <a rel="noopener" target="_blank" href="https://redactedforprivacy.com" style="background-color:rgba(255, 0, 0, 1);border-radius:5px;color:#ffffff;display:block;font-size: 18px; font-family: Helvetica, Arial, sans-serif;font-weight:bold;height:50px;mso-line-height-rule:exactly;line-height:50px;text-decoration:none;width:120px;-webkit-text-size-adjust:none;">Pay Now</a>
    <!--[if mso]>
        </center>
        </v:roundrect>
    <![endif]-->
</td>
</tr>
</table>

This is what it looks like in Outlook

This is what it looks like in Outlook,

though in standard HTML it looks perfectly fine

standard HTML it looks perfectly fine:

Any ideas on how I can fix this reasonably easily?

I tried several line-height fixes, setting the height manually in various places, using a few vertical align tricks for Outlook and standard HTML align, using mso proprietary styles, among a few other things I'm probably forgetting.

I just need the text to be vertically aligned, and I'm about ready to give up and put a plaintext link in my invoice email template if it's not something I can easily fix.

0

There are 0 best solutions below