2015-02-04 1 views
0
<table width="378" border="0" cellpadding="0" cellspacing="0"> 
     <tbody> 
       <tr> 
        <td height="30" width="50" bgcolor="#e8e8e8">&nbsp;&nbsp;&nbsp;</td> 
        <td style="color: #ffffff; font-weight: bold; font-family: serif; font-size: 14px; padding-top: 0px; padding-bottom: 0px;" height="30" valign="middle" width="300" align="left" bgcolor="#00aec7">This should vertically center!</td> 
       </tr> 
     </tbody> 
    </table> 

В Gmail это сосредоточено, но в Outlook оно находится в верхней части цветного полотна. Я также пробовал использовать line-height и vertical-align, но vertical-align не работает, и line-height должен быть помещен в меньший размер, чем должен быть (20 пикселей, кажется, центрируют его, несмотря на то, что TD составляет 30 пикселей высотой) , который затем делает его верхним выровненным в GMail!Почему этот HTML-код не вертикально выравнивается посередине в Outlook (HTML-адрес электронной почты)?

ответ

1

Обнаружить текст в абзаце и теге span и дать им высоту линии 100% - это единственное изменение, которое зафиксировало его. Outlook заменяет весь HTML своей собственной интерпретацией того, что он считает правильным, и представление исходного кода (определило это изменение, просмотрев источник сообщения).

<p style="height: 30px; line-height: 100%; margin: 0px; padding: 0px; font-size: 14px;"><span style="margin: 0px; padding: 0px; font-size: 14px;">This should vertically center!</span></p> 

Использование line-height с «рх», «пт» или «эм» не работает. Работает только «100%».

0

Я правильно понял, что вы пытаетесь вертикально выровнять текст? В моем тесте я увеличил высоту первой ячейки и добавил высоту линии той же высоты (чтобы показать ее в Outlook), чтобы правильно протестировать ее, и она отлично работает для меня ...

Вы можете увидеть мою Email по проверке на кислотность здесь: https://www.emailonacid.com/beta/acidtest/display/summary/s5uj5kkuZ6hdiYqCJpi2BgMA4zPCekmlukAfzgPSuF9rJ/shared

Он работает в Gmail.com, outlook.com, Outlook 2003-2013 и на мобильных устройствах. Можете ли вы предоставить скриншоты своей проблемы?

+0

спасибо, но я уже нашел ответ. –

+0

Является ли ваш ответ ответом, который вы предоставили себе, потому что я бы не предложил что-то взломанное, как линия-высота: 100%; –

+0

это единственное, что сработало. Я попробовал ваш ответ, и это не сработало. возможно, это странная настройка, но несколько человек в Outlook 2007, 2010 видели, что она не работает с вашим ответом, но работает с моим «взломанным» –

Смежные вопросы