I’m trying to center align my text in a div with a background image for an HTML Email.
It works great in Gmail and Hotmail but fails in Outlook. I’ve tried a few attempts (including VML) but not seeing much joy. Had even considered absolutely positioning the text over an img tag but Outlook pushes the text below the image visually.
Here’s a JSFiddle of what works in Gmail/Hotmail: https://jsfiddle.net/ygt13pxh/
HTML:
<table cellpadding="0" cellspacing="0" class="stylingblock-content-wrapper" style="text-align: left; min-width: 100%;" width="100%">
<tbody>
<tr>
<td align="left" class="stylingblock-content-wrapper camarker-inner header-block" style="background: #ffffff url('https://place-hold.it/300x500') no-repeat center center / cover; height: 259px;">
<h1 style="font-size:29px;font-weight:bold;text-align:center;color:#fff">Thank You</h1>
</td>
</tr>
</tbody>
</table>Attempt in Outlook: https://jsfiddle.net/ygt13pxh/1/
<table cellpadding="0" cellspacing="0" class="stylingblock-content-wrapper" style="text-align: left; min-width: 100%;" width="100%">
<tbody>
<tr>
<td align="center" class="stylingblock-content-wrapper camarker-inner header-block" style="position: relative; height: 259px;">
<!--[if gte mso 9]>
<img src="https://place-hold.it/300x500" alt="" style="display: block; width: 100%; height: auto;">
<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: #1B4F64;">
<![endif]-->
<img alt="" src="https://place-hold.it/300x500" style="display: block; width: 100%; height: auto;">
<h1 style="font-size:29px; font-weight:bold; margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">Thank You</h1><!--[if gte mso 9]>
</div>
<![endif]-->
</td>
</tr>
</tbody>
</table>Many thanks for any guidance here.