In Outlook 2016, email CTA button of banner is being aligned to left automatically if I put the CTA text alignment option as right. I am looking forward to know the exact reason why this happen in Outlook 2016 w.r.t. CTA alignment as a right and please suggest any reference link for the same.
Below is the sample HTML code with CTA in banner and having issue in Outlook alignment in case of CTA is aligned in right side. and it shows in Outlook left side.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="width: 100%;">
<head>
<!-- Marketo Variable Definitions -->
<meta class="mktoString" id="heroLinkTextbutton" mktoname="CTA Alignment" default="right" mktomodulescope="true" />
<meta class="mktoImg" id="heroBackgroundImage" mktoname="Background Image" default="http://na-sj29.marketo.com/rs/717-ICG-368/images/CTA Bng.png" mktomodulescope="true" />
<meta class="mktoColor" id="heroBackgroundColor" mktoname="Module Background" default="#ffffff" mktomodulescope="true" />
<meta class="mktoColor" id="heroButtonBackgroundColor" mktoname="Button Background Color" default="#ff5a00" mktomodulescope="true" />
<meta class="mktoColor" id="heroBorderColor" mktoname="Button Border Color" default="#ff5a00" mktomodulescope="true" />
<meta class="mktoNumber" id="heroBorderSize" mktoname="Button Border Width" default="1" min="0" max="20" units="px" step="1" mktomodulescope="true" />
<meta class="mktoString" id="heroLinkText" mktoname="Button Text" default="CLICK HERE" mktomodulescope="true" />
<meta class="mktoString" id="heroLink" mktoname="Button Link" default="http://mylink" mktomodulescope="true" />
<meta class="mktoString" id="module1ctacontent" mktoname="UTM Content" default="banner content" mktomodulescope="true" />
</head>
<body style="margin-bottom: 0; -webkit-text-size-adjust: 100%; padding-bottom: 0; min-width: 100%; margin-top: 0; margin-right: 0; -ms-text-size-adjust: 100%; margin-left: 0; padding-top: 0; padding-right: 0; padding-left: 0; width: 100%; font-family:Verdana;">
<table style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;" align="center" border="0" cellpadding="0" cellspacing="0" width="650">
<tbody>
<tr>
<td class="background" style="-webkit-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;-ms-text-size-adjust: 100%;background-position:
center;background:${heroBackgroundImage};background-color:${heroBackgroundColor};background-image:${heroBackgroundImage};border-collapse: collapse; background-repeat:no-repeat; padding-left10px; padding-right:10px" background="${heroBackgroundImage}" bgcolor="${heroBackgroundColor}" valign="top" width="100%">
<center>
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:480pt;height:310pt">
<v:fill type="frame" src="${heroBackgroundImage}" color="${heroBackgroundColor}" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<table class="table600" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; min-height: 400px; width: auto"
height="auto" align="${heroLinkTextbutton}" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; border-collapse: collapse; padding-left: 25px" align="${heroLinkTextbutton}">
<table class="contents" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;" align="${heroLinkTextbutton}" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td class="" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; text-align: left; border-collapse: collapse;" height="15%"> </td>
</tr>
<tr style="vertical-align: middle; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;">
<td class="primary-font title" style="-webkit-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;-ms-text-size-adjust: 100%;margin-left: auto;vertical-align: middle;margin-top: 0;margin-right:
auto;margin-bottom: 0;text-align: ${heroLinkTextbutton};font-size: 50px;font-family:Verdana;color:#FFF;border-collapse:
collapse;">
<div class="mktoText" mktoname="Main Title" id="mainTitle">
FREE DELIVERY
</div>
</td>
</tr>
<tr>
<td class="" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; text-align: left; border-collapse: collapse;" height="2%"> </td>
</tr>
<tr style="vertical-align: middle; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;">
<td class="secondary-font subtitle" style="-webkit-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;-ms-text-size-adjust: 100%;margin-left: auto;vertical-align: middle;margin-top: 0;margin-right:
auto;margin-bottom: 0;text-align: ${heroLinkTextbutton};font-size: 18px;font-family:Verdana;color: #000;border-collapse:
collapse;" align="${heroLinkTextbutton}">
<div class="mktoText" mktoname="Subtitle" id="subtitle">
LOREM IPSUM DOLOR SIT AMET CONSECURETUR LOREM IPSUM DOLOR SIT AMET
</td>
</tr>
<tr>
<td style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; text-align: left; border-collapse: collapse;" height="20%"> </td>
</tr>
<tr>
<td class="cta" style="hyphens: none;-webkit-text-size-adjust: 100%;mso-table-lspace: 00pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;-ms-text-size-adjust: 100%;color: #FFF;font-size:
36px;line-height:38px;font-family:Verdana;border-collapse: collapse;" align="${heroLinkTextbutton}">
<table style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;" align="${heroLinkTextbutton}" border="0" cellpadding="0" cellspacing="0" align="${heroLinkTextbutton}">
<tbody>
<tr>
<td style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none;border-collapse: collapse; -webkit-border-radius: 4px;-moz-border-radius:
4px;border-radius: 4px;" align="${heroLinkTextbutton}" bgcolor="${heroButtonBackgroundColor}"> <a
href="${heroLink}?utm_content=CTA" target="_blank" class="primary-font button" style="text-decoration: none; -webkit-text-size-adjust:100%;-ms-text-size-adjust:
100%;-webkit-background-clip: padding-box;-moz-background-clip:padding;font-family:Verdana;color: #ffffff;padding-top:
12px;padding-right:
18px;padding-bottom:
12px;padding-left:18px;border-top-width:${heroBorderSize};border-right-width:${heroBorderSize};border-bottom-width:${heroBorderSize};border-left-width:${heroBorderSize};background-clip: padding-box;border-right-style: solid;border-bottom-style:
solid;border-left-style:solid;border-top-color:${heroBorderColor};border-right-color:${heroBorderColor};border-bottom-color:${heroBorderColor};border-left-color:${heroBorderColor};display: inline-block;-webkit-border-radius: 4px;-moz-border-radius: 4px; border-radius: 4px;border-top-style:
solid;text-decoration: none;font-size: 16px;background-color:${heroButtonBackgroundColor};"><b>${heroLinkText}</b></span></a> </td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; text-align: left; border-collapse: collapse;"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</center> </td>
</tr>
<tr>
<td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;line-height:10px;font-size:10px;" height="10"> </td>
</tr>
</tbody>
</table>
</body>
</html>
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.