如何在 HTML 电子邮件模板中将 OUTLOOK 的背景图片文本居中对齐？

Question

我正在创建电子邮件模板。我想要 背景图片 用于 <td>。我已经使用 VML 代码使其在 Outlook 及其旧版本 上运行。我已经测试了我的电子邮件模板，它在浏览器和GMAIL中工作正常，但在展望

I want to achieve the result which is in below screenshot. Which I am getting in Browser and GMAIL but no in OUTLOOK

In Outlook text Your Quertly Update is rendering on top left. I have tried to use position: absolute; top: 50%; left:0 right: 0; but that is also not working

下面是我正在使用的代码。

代码：

<table cellpadding="0" cellspacing="0" border="0" width="600" height="100" align="center">
  <tr>


 <td background="https://picsum.photos/600/100" bgcolor="#ffffff" width="530" height="95" valign="middle" style="background-image: url('https://picsum.photos/600/100');background-repeat:no-repeat; text-align:center; vertical-align:middle;">
 
   <!--[if gte mso 9]>
  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:530px;height:95px;color:#ffffff">
    <v:fill type="tile" src="https://picsum.photos/600/100" color="#ffffff" />
    <v:textbox inset="0,0,0,0">
  <![endif]-->
 
   <p style="font-family:Arial, Helvetica, sans-serif; font-size:40px; color:#ffffff; margin: 0;">Your quarterly Update</p>
  
  <!--[if gte mso 9]>
    </v:textbox>
  </v:rect>
  <![endif]-->
</td>
</tr>
</table>

我是否需要在 VML 代码 中更改任何内容以获取我的文本中心和中间，垂直和水平。

Answer 1

尝试添加 100% 宽度 div 并居中对齐作为 bg 图像元素的环绕：

 <!--[if gte mso 9]>
<div align="center" style="text-align:center; width: 100%;">
  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:530px;height:95px;color:#ffffff">
    <v:fill type="tile" src="https://picsum.photos/600/100" color="#ffffff" />
    <v:textbox inset="0,0,0,0">
  <![endif]-->

   <p style="font-family:Arial, Helvetica, sans-serif; font-size:40px; color:#ffffff; margin: 0;">Your quarterly Update</p>

  <!--[if gte mso 9]>
    </v:textbox>
  </v:rect>
</div>
  <![endif]-->

Answer 2

获取该段落的内容并将其放在 table 中，并在 td 上填充。以下是我使用的方法：

<table cellpadding="0" cellspacing="0" border="0" width="600" height="100" align="center">
  <tr>


 <td background="https://picsum.photos/600/100" bgcolor="#ffffff" width="530" height="95" style="background-image: url('https://picsum.photos/600/100');background-repeat:no-repeat;vertical-align:top;">
 
   <!--[if gte mso 9]>
  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:530px;height:95px;color:#ffffff">
    <v:fill type="tile" src="https://picsum.photos/600/100" color="#ffffff" />
    <v:textbox inset="0,0,0,0">
  <![endif]-->
 <table cellpadding="0" cellspacing="0" border="0" width="600" height="100" align="center">
  <tr>
   <td style="font-family:Arial, Helvetica, sans-serif; font-size:40px; color:#ffffff;text-align:center;padding-top:20px;">Your quarterly Update</p></td>
  </tr>
</table>
  <!--[if gte mso 9]>
    </v:textbox>
  </v:rect>
  <![endif]-->
</td>
</tr>
</table>

希望这就是您要找的答案。

干杯

如何在 HTML 电子邮件模板中将 OUTLOOK 的背景图片文本居中对齐？

How to center align text for background image for OUTLOOK in HTML Email Template?

html

outlook

vml

background-image

html-email