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
,
though in 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.