Valign не работает в письмах Outlook Outlook

Question

Итак, я всю неделю провоцировал редизайн рассылки новостей для своей компании, настраивая html, чтобы он отображался полупоследовательно между почтовыми клиентами. Я очень хорошо использовал www.litmus.com для большей части этого. Это последняя ошибка, и она продолжает ускользать от меня. У нас есть горизонтальная панель навигации сверху. Вот урезанная версия с только один <td>, как правило, есть 5 из них:

<table width="100%" border="0" align="right" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF" valign="middle"> 
    <tr valign="middle"> 
     <td valign="middle" align="center" style="font-family: 'Lucida Grande', Arial, sans-serif; font-size:12px; line-height: 200%; background-color:#b2382a; color: #FFFFFF; text-transform:uppercase;" >&nbsp; 
      <a target="_blank" style="font-family: 'Lucida Grande', Arial, sans-serif; font-size:12px; line-height: 200%; background-color:#b2382a; color: #FFFFFF; text-transform:uppercase; text-decoration:none; vertical-align: middle;" href="LinkURLHere"> 
       <span style="color:#FFFFFF; vertical-align: middle;">Link Text Here</span> 
      </a>&nbsp; 
     </td> 
    </tr> 
</table> 

Как вы можете видеть, встроенные стили вверх по WAZOO. Он отображает штраф на всех тестах лакмусовой бумажки, за исключением Outlook 2002, 2007 и 2013, в которых valign = «средний» игнорируется, а текст ссылки нажимается вверху: http://i.imgur.com/a48ObB8.jpg

Несколько источников, как здесь, так и в другом месте, предположим, что valign работает в Outlook, но я пробовал атрибут valign="middle" для каждого тега, о котором я могу думать, и несколько css vertical-align: middle; s. Это уже не так? И если да, есть ли какая-то работа?

Answer 1

Valign всегда работал для меня, но я думаю, что для его работы в Outlook 2007 вы должны установить высоту вашего <td>. Это всегда сработало для меня:

<table cellspacing="0" cellpadding="0" width="100%" border="0" align="right"> 
    <tr> 
     <td align="center" valign="middle" bgcolor="#b2382a" height="35"> 
      <span style="color:#FFFFFF; 
         font-family: 'Lucida Grande', Arial, sans-serif; 
         font-size:12px; 
         text-transform:uppercase;"> 
       Link Text Here 
      </span> 
     </td> 
    </tr> 
</table> 

Answer 2

Короткий ответ: используйте прокладку сверху и нижнюю часть с отрицательным значением.

Длинный ответ: Если вы хотите написать кросс-совместимое письмо, не используйте valign вообще. Проблема, с которой вы сталкиваетесь, связана с чем-то еще, потому что по умолчанию текст должен отображаться по вертикали в ячейке.

Получите ваш код обратно в точку, где он по умолчанию находится в центре, и где вам нужно что-то другое, используйте вложенные таблицы, cellpadding, margin и padding, чтобы получить место размещения, которое вы ищете.

Answer 3

Я думаю, что проблема заключается в настройке линии линии. Я обнаружил, что когда высота линии равна высоте td, valign = middle будет работать неправильно в Outlook.

Ниже не будет среднего выравнивания текста:

<table cellspacing="0" cellpadding="0" width="100%" border="0" align="right"> 
    <tr> 
     <td align="center" valign="middle" bgcolor="#b2112a" height="48" style="font-size:20px; line-height:48px;"> 
      Link Text Here 
     </td> 
    </tr> 
</table> 

ЭТО ВОЛЯ:

<table cellspacing="0" cellpadding="0" width="100%" border="0" align="right"> 
    <tr> 
     <td align="center" valign="middle" bgcolor="#b2112a" height="48" style="font-size:20px; line-height:24px;"> 
      Link Text Here 
     </td> 
    </tr> 
</table> 

Answer 4

Я знаю, что этот вопрос старый, но я хотел бы поделиться решением этой проблемы, которая работала для меня.

У меня есть это:

<table width="600" border="0" cellpadding="0" cellspacing="0"> 
    <tr> 
    <td width="600" valign="middle"> 
     Content 
    </td> 
    </tr> 
</table> 

Это работает на большинстве почтовых клиентов, но не на Outlook, версии более чем 2010 Чтобы заставить его работать правильно только добавить условный комментарий со спейсером, как это:

<table width="600" border="0" cellpadding="0" cellspacing="0"> 
    <!-- In this case is a spacer of 40px --> 
    <!--[if (gt mso 14)]> 
    <tr> 
    <td> 
     <table border="0" cellpadding="0" cellspacing="0"> 
     <tr> 
      <td style="font-size: 40px; line-height: 40px;" bgcolor="#ffffff" width="100%" height="40" valign="top"> 
      &nbsp; 
      </td> 
     </tr> 
     </table> 
    </td> 
    </tr> 
    <![endif]--> 
    <tr> 
    <td width="600" valign="middle"> 
     Content 
    </td> 
    </tr> 
</table>