Add the HTML CTA over the background Image in email template

Question

I want to add the HTML CTA over the background image in email template. My code is working perfectly in all email clients, Mobile and desktop. Only in Outlook CTA copy is not aligned correctly. Add the Code and Screenshot for reference.

 <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
 
  <tr>
   <td bgcolor="#FFFDFB" style="padding:0 0px 0px 0px;">
    <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
     
      <tr>
       <td align="center" background="https://image.e.iqos.com/lib/fe3915707564067f721579/m/1/fc4a7ecd-84fe-4a84-8b3a-41e0cdb7d157.png" class="mobile-hero" height="200px" style="background-repeat:no-repeat; background-size:100% auto;" valign="top" width="100%">
        <!--[if gte mso 9]>
                <img src="https://image.e.iqos.com/lib/fe3915707564067f721579/m/1/fc4a7ecd-84fe-4a84-8b3a-41e0cdb7d157.png" height="200" width="640" alt="" border="0" style="display: inline-block;" />                
                <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="false" stroke="false" style="position:relative;top:0;left:0;width:640px;height:200px;">
                <v:textbox inset="0,0,0,0">
                <![endif]--><table border="0" cellpadding="0" cellspacing="0">
         
          <tr>
             <td class="mobile-hide">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        </td>
           <td align="center" class="mobile-position" style="width: 100%; padding: 110px 10px 0px 0px;" valign="middle" width="100%">
            <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
             
              <tr>
               <!--[if gte mso 9]>       
           <td style="padding: 0 22px 0px 0px; valign="top" align="center">
            <table align="center" cellspacing="0" cellpadding="0" border="0">              
               <tr>
                     <![endif]--><td align="center" valign="top">
                <div>
                 <!--[if mso 12 | mso 14]> 
          <v:roundrect xmlns_v="urn:schemas-microsoft-com:vml" xmlns_w="urn:schemas-microsoft-com:office:word" href="#"  alias="CTA"  style="position:relative; top:1180px; left: 220px; height:52px;v-text-anchor:middle;width:160px;color:#ffffff;" arcsize="50%" strokecolor="#000001" fillcolor="#ffffff" class="darkmode_white" >
            <w:anchorlock/>
            <center style="color:#000001;font-family:'Neue Plak SemiBold', Arial, sans-serif; font-size:16px; line-height:20px; "><strong>%%voucher_code%%</strong></center>
          </v:roundrect>
        <![endif]--><!--[if gte mso 15]>  
          <v:roundrect xmlns_v="urn:schemas-microsoft-com:vml" xmlns_w="urn:schemas-microsoft-com:office:word" href="#"  alias="CTA"  style="position:relative;  top:100px; left: 240px; height:52px;v-text-anchor:middle;width:160px;color:#ffffff;" arcsize="50%" strokecolor="#000001" fillcolor="#ffffff" class="darkmode_white" >
            <w:anchorlock/>

            <center style="color:#000001;font-family:'Neue Plak SemiBold', Arial, sans-serif; font-size:16px; line-height:20px; "><strong>%%voucher_code%%</strong></center>

          </v:roundrect>
        <![endif]--><a alias="CTA" class="darkmode_white darkmode_black_background darkmode_border_white mobile-position-cta" href="#" style="background-color:#ffffff;border:2px solid #ffffff;border-radius:50px;color:#000001;display:inline-block;font-family:'Neue Plak SemiBold', Arial, sans-serif; font-size:16px; line-height:21px; text-align:center;text-decoration:none;width:160px;-webkit-text-size-adjust:none;mso-hide:all;padding: 10px 19px 14px 19px;" target="_blank"><strong>%%voucher_code%%</strong></a></div></td><!--[if gte mso 9]>    
  </tr>
              </table>
            </td>
   <![endif]--></tr></table></td>
          <td class="mobile-hide">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        </td>
         </tr></table><!--[if gte mso 15]>                 </v:textbox>                 </v:rect>                 <![endif]--><!--[if mso 12 | mso 14]>                 </v:textbox>                 </v:rect>                 <![endif]--></td></tr></table></td></tr></table>

enter image description here

Answer 1

You have the height as 52px but the line-height as 20px. Since it's on one line, make the line-height 52px too.