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

【问题标题】：How to center align text for background image for OUTLOOK in HTML Email Template?如何在 HTML 电子邮件模板中为 OUTLOOK 的背景图像居中对齐文本？
【发布时间】：2018-05-17 09:47:58
【问题描述】：

我正在创建 电子邮件模板。 <td> 的我想要的位置和 背景图片。我已使用 VML 代码使其适用于 Outlook 及其旧版本。我已经测试了我的 电子邮件模板，它在 Browser 和 GMAIL 中运行良好，但在 OUTLOOK 中却无法运行 p>

我想实现如下截图中的结果。我在 Browser 和 GMAIL 中得到了，但在 OUTLOOK
中没有

在 Outlook 中，Your Quertly Update 文本呈现在左上方。我试过用 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 代码 中更改什么来获取我的文本吗居中和中间，垂直和水平。

【问题讨论】：

Outlook 不支持position: absolute;。

标签： html outlook background-image html-email vml

【解决方案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>

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

干杯

【讨论】：

【解决方案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]-->

【讨论】：