Valign無法在Outlook HTML電子郵件中工作

因此，我一直在爲我的公司重新設計一個新聞簡報，調整html以使其在電子郵件客戶端中半連續顯示。我已經很好地利用了www.litmus.com。這是剩下的最後一個錯誤，它仍然在逃避我。我們有一個橫跨頂部的水平導航欄。這裏是一個精簡版只有一個<td>，通常有他們5：Valign無法在Outlook HTML電子郵件中工作

<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。這不再是真的嗎？如果是這樣，是否有某種工作？

來源

2013-06-04 aurath

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>

來源

2013-09-20 13:22:28

沒有骰子。沒有爲我工作。 – MikeTheLiar

簡短的回答：使用填充頂部和填充底部的負值。

長答案：如果你想寫一個交叉兼容的電子郵件，根本不要使用valign。您的問題源自其他地方，因爲默認情況下文本應該在單元格中垂直顯示。

將您的代碼恢復到默認的中心位置，以及您需要其他位置的任何地方使用嵌套表格，cellpadding，邊距和填充以獲取您要查找的位置。

來源

2014-01-07 08:20:00 davidcondrey

我認爲問題在於你設定的行高。我發現當行高等於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>

來源

2014-05-21 18:16:34

這對我有效 –

相同，看起來像是當你設置行高時，Outlooks變得瘋狂。 –

-1

我知道這個問題是舊的，但我想分享這個問題得到成功的解決方案爲了我。

我有這樣的：

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

來源

2016-05-18 15:44:13 tupini07

Valign無法在Outlook HTML電子郵件中工作

回答

相關問題