html outlook email bug - html

Question

Outlook windows app problem:
problem is that I cant vertical-align(center) text and image in the button and also border-radius not working in the outlook app, any suggestions on how to fix it and make it the same as in Gmail for the outlook app.
it happens only in outlook application.
<!-- [if !mso]><!--> <!--<![endif]-->
<style>#outlook a {
padding: 0;
}
body {
margin: 0;
padding: 0;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
table,
td {
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}
p {
display: block;
margin: 13px 0;
}</style>
<!-- [if mso]>
<noscript>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
</noscript>
<![endif]--> <!-- [if lte mso 11]>
<style type="text/css">
.mj-outlook-group-fix { width:100% !important; }
</style>
<![endif]--> <!-- [if !mso]><!-->
<style>#import url(https://fonts.googleapis.com/css?family=Roboto:300,400,500,700);</style>
<!--<![endif]-->
<style>#media only screen and (min-width:480px) {
.mj-column-per-100 {
width: 100% !important;
max-width: 100%;
}
}</style>
<style>.moz-text-html .mj-column-per-100 {
width: 100% !important;
max-width: 100%;
}</style>
<style>[owa] .mj-column-per-100 {
width: 100% !important;
max-width: 100%;
}</style>
<style>#media only screen and (max-width:480px) {
table.mj-full-width-mobile {
width: 100% !important;
}
td.mj-full-width-mobile {
width: auto !important;
}
}</style>
<div style="display: none; font-size: 1px; color: #ffffff; line-height: 1px; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden;">Pre-header Text</div>
<div style="background-color: #ffffff;">
<table style="width: 100%;" role="presentation" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td><!-- [if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="margin: 0px auto; max-width: 600px;">
<table style="width: 100%;" role="presentation" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td style="direction: ltr; font-size: 0px; padding: 20px 0; padding-bottom: 20px; text-align: center;"><!-- [if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
<div class="mj-column-per-100 mj-outlook-group-fix" style="font-size: 0px; text-align: left; direction: ltr; display: inline-block; vertical-align: top; width: 100%;">
<table style="vertical-align: top;" role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-size: 0px; padding: 10px 25px; word-break: break-word;" align="center">
<table style="border-collapse: collapse; border-spacing: 0px;" role="presentation" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="width: 275px;">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!-- [if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!-- [if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
<!-- [if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" bgcolor="#F0F2F5" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="background: #F0F2F5; background-color: #f0f2f5; margin: 0px auto; max-width: 600px; width: 500px;">
<table style="background: #F0F2F5; background-color: #f0f2f5; width: 500px;" role="presentation" border="0" width="500px" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td style="direction: ltr; font-size: 0px; padding: 20px 0; text-align: center;"><!-- [if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
<div class="mj-column-per-100 mj-outlook-group-fix" style="font-size: 0px; text-align: left; direction: ltr; display: inline-block; vertical-align: top; width: 500px;">
<table style="vertical-align: top;" role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-size: 0px; padding: 10px 25px; word-break: break-word;" align="center">
<table style="border-collapse: collapse; border-spacing: 0px;" role="presentation" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="width: 60px;">
<img style="border: 0; display: block; outline: none; text-decoration: none; height: 60px; width: 100%; font-size: 13px;" src="data:image/png;base64,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" width="60" height="60">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="font-size: 0px; padding: 10px 25px; padding-bottom: 20px; word-break: break-word;" align="center">
<div style="font-family: 'Roboto', Arial, sans-serif; font-size: 40px; font-weight: 900; line-height: 24px; text-align: center; color: #2a6adc;">ACCESS REQUESTED</div>
</td>
</tr>
</tbody>
</table>
</div>
<!-- [if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!-- [if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="body-section-outlook" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div class="body-section" style="margin: 0px auto; max-width: 600px; width: 500px;">
<table style="width: 500px;" role="presentation" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td style="direction: ltr; font-size: 0px; padding: 20px 0; padding-bottom: 0; padding-top: 0; text-align: center;"><!-- [if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" width="600px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" bgcolor="#F0F2F5" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="background: #F0F2F5; background-color: #f0f2f5; margin: 0px auto; max-width: 600px; width: 500px;">
<table style="background: #F0F2F5; background-color: #f0f2f5; width: 100%;" role="presentation" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td style="direction: ltr; font-size: 0px; padding: 20px 0; text-align: center;"><!-- [if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
<div class="mj-column-per-100 mj-outlook-group-fix" style="font-size: 0px; text-align: left; direction: ltr; display: inline-block; vertical-align: top; width: 100%;">
<table style="vertical-align: top;" role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-size: 0px; padding: 10px 25px; word-break: break-word;" align="left">
<div style="font-family: 'Roboto', Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 24px; text-align: left; color: #000000;">Daniel [and others] [has/have] requested access to the [Entity Names] “[Names of Entities]” for the following research objective:
<br>“[Description of Analysis]”. The access is requested for until XX/XX/XXXX.
</div>
</td>
</tr>
<tr>
<td style="font-size: 0px; padding: 10px 25px; padding-bottom: 15%; word-break: break-word;" align="left">
<div style="font-family: 'Roboto', Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 24px; text-align: left; color: #000000;">Plesae review the request by selecting View Request below.</div>
</td>
</tr>
<tr>
<td style="font-size: 0px; padding: 10px 25px; padding-bottom: 30px; word-break: break-word;" align="center">
<table style="border-collapse: separate; width: 240px; line-height: 100%;" role="presentation" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" bgcolor="#2A6ADC" role="presentation" style="border:none;border-radius:27px;cursor:auto;mso-padding-alt:10px 25px;background:#2A6ADC;" valign="middle">
<a href="https://google.com" style="display:inline-block;background:#2A6ADC;color:#ffffff;font-family:'Roboto', Arial, sans-serif;font-size:13px;font-weight:normal;line-height:24px;margin:0;text-decoration:none;text-transform:uppercase;padding:10px 25px;mso-padding-alt:0px;border-radius:27px;" target="_blank">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAYCAYAAAAPtVbGAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACGSURBVHgB7dTRCYAgEAbgKxqgERypEdxEmqgRHMUV2uC6gx6MytROEPGDg6ijvzg5gK5qiGjxnaNS8Ae9QOO3rKDRu1YR/dzjIj5mo5qfQiQtVLp0CCv+JxehkHVIwP05IWKmwDNDJ8SAgLpnAoEZpISIaXMmO8hytzu80M7FJsH6C7KrzwEvztK5Nj8QJgAAAABJRU5ErkJggg==" style="vertical-align:middle;" width="25px" height="25px" />
<span style="vertical-align:middle;">View request</span>
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!-- [if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!-- [if mso | IE]></td></tr></table></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!-- [if mso | IE]></td></tr></table><![endif]-->
</div>
GMail example
outlook app mail example