Как выровнять текст по центру для фонового изображения для OUTLOOK в HTML-шаблоне электронной почты? - PullRequest
Новая
       61

Как выровнять текст по центру для фонового изображения для OUTLOOK в HTML-шаблоне электронной почты?

0 голосов
/ 17 мая 2018

Я создаю Шаблон электронной почты . Где я хочу и фоновое изображение для <td>. Я использовал VML код, чтобы он работал на Outlook и его старых версиях . Я протестировал мой шаблон электронной почты , и он нормально работает в Браузере и GMAIL , но не работает в OUTLOOK

Я хочу добиться результата, показанного ниже снимок экрана . Который я получаю в Браузере и GMAIL , но не в OUTLOOK

enter image description here

В Outlook текст Ваше Quertly Update отображается в левом верхнем углу. Я пытался использовать position: absolute; top: 50%; left:0 right: 0; но это тоже не работает

enter image description here

Вот код, который я использую ниже.

Код: 

<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-код , чтобы получить мой текст центр и середина, по вертикали и горизонтали.

Ответы [ 2 ]

0 голосов
/ 17 мая 2018

Возьмите содержимое абзаца и поместите его в таблицу с отступами на 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>

Надеюсь, что это ответ, который вы искали.

Приветствия

0 голосов
/ 17 мая 2018

Попробуйте добавить div ширины 100% с выравниванием по центру в качестве обертки вокруг элемента изображения 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]-->
...