Valign non funziona in Outlook Email HTML

Question

Così ho litigato tutta la settimana con una riprogettazione della newsletter per la mia azienda, modificando l'html per renderlo visualizzato in modo semi-coerente tra i client di posta elettronica. Ho fatto buon uso di www.litmus.com per gran parte di questo. Questo è l'ultimo bug rimasto e continua a sfuggirmi. Abbiamo una barra di navigazione orizzontale nella parte superiore. Ecco una versione ridotta con una sola <td>, normalmente ci sono 5 di loro:

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

Come si può vedere, gli stili inline su per la Wazoo. Visualizza bene su tutti i test al tornasole tranne Outlook 2002, 2007 e 2013, in cui valign = "middle" viene ignorato e il testo del link viene spinto in alto in questo modo: http://i.imgur.com/a48ObB8.jpg

Diverse fonti, sia qui che altrove, suggerisco che Valign funzioni in Outlook, ma ho provato l'attributo valign="middle" su ogni tag a cui riesco a pensare, e anche diversi css vertical-align: middle; s. Non è più vero? E se è così, c'è un lavoro in giro di qualche tipo?

Answer 1

Valign ha sempre funzionato per me, ma penso che funzioni in Outlook 2007 devi impostare l'altezza del tuo <td>. Questo ha sempre funzionato per me:

<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

Risposta breve: utilizzare padding-top e padding-bottom con un valore negativo.

Risposta lunga: se si desidera scrivere un'e-mail cross-compatibile, non utilizzare affatto Valign. Il problema che stai provando da un'altra parte è che, per impostazione predefinita, il testo dovrebbe essere visualizzato verticalmente nella cella.

Ritrova il tuo codice a un punto in cui è predefinito al centro e ovunque tu abbia bisogno di qualcosa di diverso usa le tabelle annidate, il cellulare, il margine e il padding per ottenere il posizionamento che stai cercando.

Answer 3

Penso che il problema sia l'altezza della linea che si sta impostando. Ho scoperto che quando l'altezza della linea è uguale all'altezza td, valign = middle non funzionerà correttamente in Outlook.

Quanto segue non sarà mezza allineare il testo:

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

Ciò:

<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

So che questa domanda è vecchio, ma ho voluto condividere una soluzione per questo problema che ha funzionato per me.

ho questo:

<table width="600" border="0" cellpadding="0" cellspacing="0"> 
    <tr> 
    <td width="600" valign="middle"> 
     Content 
    </td> 
    </tr> 
</table> 

Questo funziona sulla maggior parte dei client di posta elettronica, ma non sulla versione di Outlook superiore a 2010. Per farlo funzionare correttamente è sufficiente aggiungere un commento condizionale con un distanziatore come questo:

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