如何垂直對齊圖像和文本交叉客戶端電子郵件模板

<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中，項目符號和文本不在頂部垂直對齊，似乎在文本頂部有填充。有任何想法嗎？如何垂直對齊圖像和文本交叉客戶端電子郵件模板

來源

2010-12-08 user1417094

首先與電子郵件一般的做法，你會希望把顯示器塊，通常邊界：在所有的圖像沒有。其次，您可能會遇到默認設置問題。在td上設置所有樣式。如果我需要一些特定的間距，我會在td上設置字體大小和行高爲1px以避免繼承。你可能還需要在你的第一個td上使用valign。我無法確定哪些部分不符合描述。祝你的郵件好運。

來源

2012-03-15 04:56:00 mikevoermans

長話短說，因爲我一直在做今天下午看起來前景的測試支持對TD元素，但Gmail和其餘希望垂直對齊CSS規則的VALIGN屬性。 Gmail只支持內聯樣式，而不支持樣式標籤，因此您必須這樣做：

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

此外請確保您聲明瞭文檔類型！確保這是你<html>元以上：

<!DOCTYPE html>

來源

2012-06-21 05:13:11

你實際上並不需要CSS，只是`valign =「top」` – John 2014-03-21 19:46:02

使用此代碼

<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>

來源

2012-08-23 07:31:27 Carlos

-1

我猜想，這可能是由於。我不再有源代碼，但我記得很多電子郵件客戶端，包括Outlook都沒有閱讀。

來源

2017-10-23 17:29:32

如何垂直對齊圖像和文本交叉客戶端電子郵件模板

回答

相關問題