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

Question

我正在制作电子邮件模板。我想要的地方和<td>的背景图片。我使用 VML 代码使其可以在 Outlook及其旧版本上运行。我已经测试了我的电子邮件模板，它在浏览器和 GMAIL 中工作正常，但在 OUTLOOK 中无法正常工作

  

我想达到截图下面的结果。我进入浏览器和 GMAIL ，但 OUTLOOK

  

在 Outlook 文本中您的Quertly更新正在左上角呈现。   我试过用   的 position: absolute; top: 50%; left:0 right: 0;   但那也行不通了

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

代码：

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我需要在 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>

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

干杯

Answer 2

尝试添加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]-->