Как вертикальное выравнивание изображений и текстовых шаблонов электронной почты 

<table cellspacing="0" cellpadding="0" border="0">
 <tbody>
   <tr>
     <td width="20">&nbsp;<img height="12" alt="" src="/CmpImg/2010/22677/924228_immunotec_bullet.gif" width="12"></td>
     <td valign="top"><span style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; PADDING-BOTTOM: 0px; COLOR: rgb(0,0,0); LINE-HEIGHT: 16px; PADDING-TOP: 0px; FONT-FAMILY: Arial; TEXT-ALIGN: left">Reliable service team, deployed to your location, at your convenience</span></td>
   </tr>
 </tbody>
</table>

У меня есть код выше в Outlook. Он отлично отображен, но в Gmail, Yahoo и Hotmail маркеры и текст не выравниваются по вертикали сверху, кажется, что в верхней части текста есть надпись. Любые идеи?

Ответы

Ответ 1

Короче говоря, в тестировании, которое я делал сегодня днем, похоже, что Outlook поддерживает свойство valign на td-элементах, но gmail, а остальное - правило css с вертикальным выравниванием. Gmail поддерживает только встроенные стили, а не теги стиля, поэтому вам нужно сделать что-то вроде этого:

<table>
  <tr>
    <td valign="top" style="vertical-align:top;"></td>
  </tr>
</table>

Также убедитесь, что вы объявляете doctype! Убедитесь, что это выше вашего элемента <html>:

<!DOCTYPE html>

Ответ 2

Используйте этот код

<table cellspacing="0" cellpadding="0" border="0">
   <tbody>
   <tr>
   <td width="20" align="left" valign="top">&nbsp;<img height="12" alt="" src="/CmpImg/2010/22677/924228_immunotec_bullet.gif" width="12" align="top"></td>
   <td align="left" valign="top"><span style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; PADDING-BOTTOM: 0px; COLOR: rgb(0,0,0); LINE-HEIGHT: 16px; PADDING-TOP: 0px; FONT-FAMILY: Arial; TEXT-ALIGN: left">Reliable service team, deployed to your location, at your convenience</span></td>
   </tr>
   </tbody>
   </table>

Ответ 3

Сначала, как обычная электронная почта, вы хотите поместить блок отображения и обычно border: none на всех изображениях. Во-вторых, у вас могут возникнуть проблемы с настройками по умолчанию. Установите все стили на td. Если мне понадобится определенный интервал, я установил размер шрифта и высоту строки в 1px на td, чтобы избежать наследования. Вам также может понадобиться valign top на вашем первом td. Я не могу сказать, какая часть не выстраивается из описания. Удачи вам в письмах.

Ответ 4

Я бы предположил, что это может быть из-за. У меня больше нет источника, но я помню, что многие почтовые клиенты, включая Outlook, не читают.