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

Question

我正在创建电子邮件模板.当我想和背景图像进行<td>.我使用VML代码使其适用于Outlook及其旧版本.我测试了我的电子邮件模板,它在浏览器和GMAIL中工作正常但在OUTLOOK中没有工作

我想实现下面截图中的结果.我在浏览器和GMAIL中获得但在OUTLOOK中没有

在Outlook文本中,您的Quertly更新正在左上角呈现.我试过使用 position: absolute; top: 50%; left:0 right: 0; 但是也没用

这是我正在使用的代码.

码:

<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

取段落的内容并将其放在带有填充物的表格中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>

希望这是您正在寻找的答案.

干杯