如何在HTML電子郵件模板中為OUTLOOK的背景圖像居中對齊文本？

Question

我正在創建電子郵件模板 。 我想要的地方和<td> 背景圖片 。 我已經使用VML代碼使其在Outlook及其較早版本上運行 。 我已經測試了我的電子郵件模板 ，它在瀏覽器和GMAIL中可以正常工作，但在OUTLOOK中卻無法正常工作

我想獲得以下截圖中的結果。 我在瀏覽器和GMAIL中獲得但在OUTLOOK中卻沒有

在Outlook文本中， 您的正確更新將顯示在左上方。 我試圖使用position: absolute; top: 50%; left:0 right: 0; 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> 

希望這是您想要的答案。

干杯

Answer 2

嘗試添加一個100％寬度的div，該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]-->