2013-03-21 6 views
1

У меня возникли проблемы с выравниванием изображения с помощью какого-либо текста. Проблема возникает только в перспективе 03,07 & 10. Смотреть эту картину, чтобы получить лучшее понимание моей проблемы: enter image description hereHtml email выравнивание текста и изображения

Это мой код:

<td valign="middle" style="color:#fff; font-size:18px; padding-left:3%;" width="600" height="34" bgcolor="#1a292f"> 
<span class="nonmobile_content"> 
    Onsdag 
</span>       
<span style="font-weight: bold"> 
    21.03 
</span>      
<span style="color:#87bcd8;"> 
    2013 
</span>      
<span style="color:#87bcd8;"> 
    uke 11 
</span> 
<span> 
    <img src="retriever-logo-top.png" align="right"> 
</span> 

     

+0

Вы не должны использовать 'ALIGN = right' вообще. Лучше плавать img правильно. Если вы хотите, чтобы он был выровнен по вертикали, просто установите соответствующую высоту линии как для span, так и для img. –

+5

@nd_macias на самом деле, при создании ** html для писем ** очень мало поддержки css (особенно в Outlook), поэтому align = "right" действительно является способом выхода. – xec

+0

@xec Правда, я не заметил, что это шаблон для электронной почты. Сожалею. :) –

ответ

3

Есть ли причина, по которой вы помещаете все это в одну ячейку таблицы, вместо того, чтобы помещать изображение в отдельную ячейку? Вы могли бы просто:

<tr> 
    <td colspan="2"> 
     Retriever (1), Cision (2), ... 
    </td> 
</tr> 
<tr> 
    <td ... > 
     <span class="nonmobile_content"> 
      Onsdag 
     </span>       
     <span style="font-weight: bold"> 
      21.03 
     </span>      
     <span style="color:#87bcd8;"> 
      2013 
     </span>      
     <span style="color:#87bcd8;"> 
      uke 11 
     </span> 
    </td> 
    <td> 
     <img src="retriever-logo-top.png" align="right"> 
    </td> 
</tr> 

Затем вместо добавления width к каждому отдельному td просто добавить его к столу:

<table width="600"> 
+0

Я попробую это, надеюсь, что это сработает. – Twistar

+0

Это действительно работает! Мне просто пришлось сменить colspan = "2" на colspan = "3", и теперь он хорошо выравнивается! Спасибо =) – Twistar