OutlookのHTML電子メールでValignが動作しない

Question

私は一週間以内に私の会社のニュースレターの再設計を行い、電子メールクライアント間で半永久的に表示されるようにHTMLを調整しています。私はこれの多くのためにwww.litmus.comをうまく利用しました。これが最後のバグであり、それは私を逃れ続けます。私たちは上に横にあるナビゲーションバーを持っています。ここでは一つだけ<td>でストリップダウンバージョンですが、通常はそれらの5がある：wazooアップ

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

あなたが見ることができるように、インラインスタイルは。 valign = "middle"が無視され、リンクテキストが次のように上にプッシュされるOutlook 2002、2007、2013を除いて、リトマステストのすべてでうまく表示されます。http://i.imgur.com/a48ObB8.jpg

他の場所では、valignはOutlookで動作することを示唆していますが、私は考えることができるすべてのタグにvalign="middle"属性を試しました。いくつかのCSS vertical-align: middle;も同様です。これはもはや真実ですか？もしそうなら、ある種の問題がありますか？

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をまったく使用しないでください。デフォルトでは、テキストはセルの中央に垂直に表示されるはずです。

コードを中央に戻し、何かが必要な場所では、ネストしたテーブル、セルパディング、マージン、およびパディングを使用して、探しているプレースメントを取得します。

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> 

THIS WILL：

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

これは、電子メールクライアントのほとんどで動作しますが、ではない、それはちょうどこのようなスペーサーとの条件付きコメントを追加するには、正しく動作させるために、2010年より大きなOutlookのバージョンに：

を

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