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

<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 маркеры и текст не выравниваются по вертикали сверху, кажется, что в верхней части текста есть отступы. Любые идеи?


html css html-email
person user1417094    schedule 08.12.2010    source источник

Ответы (3)


arrow_upward
33
arrow_downward

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

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

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

<!DOCTYPE html>
person David Meister    schedule 21.06.2012
comment
На самом деле вам не нужен CSS, только valign="top" - person John; 21.03.2014
comment
@John прав, лучше всего использовать атрибут valign, не используйте для этого CSS. - person revelt; 26.08.2016

arrow_upward
6
arrow_downward

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

<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>
person Carlos    schedule 23.08.2012

arrow_upward
5
arrow_downward

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

person mikevoermans    schedule 15.03.2012