Alignement vertical dans Outlook 2007/2010

Question

J'ai un bulletin html qui fonctionne dans la plupart des opérateurs de messagerie, mais le formatage est foiré dans Outlook. Voici un extrait de l'e-mail que c'est la seule partie qui joue jusqu'à:

<td align="left" valign="top" bgcolor="#666f87" style="background: #666f87;"> 
                <div style="color: #cccccc;"> 
                 <p style="color: #cccccc; font-size: 11px; font-family: arial; font-weight: normal; margin-bottom: 10px; margin-top: 0;"><strong>Social Media:</strong></p> 
                 <p style="color: #cccccc; font-size: 11px; font-family: arial; font-weight: normal; margin-top: 0; margin-bottom: 5px;"> 
                  <img style="border:0; display: inline-block; margin-right: 5px; vertical-align: middle;" src="facebook.png" alt="Facebook" /><span style="color: #cccccc; font-size: 11px; font-family: arial; font-weight: normal; margin-top: 0;"><a style="color: #cccccc;" href="#" title="Facebook" >Become a fan on Facebook</a></span>  
                 </p> 
                 <p style="color: #cccccc; font-size: 11px; font-family: arial; font-weight: normal; margin-top: 0; margin-bottom: 5px;"> 
                  <img style="border:0; display: inline-block; margin-right: 5px; vertical-align: middle;" src="twitter.png" alt="Twitter" /><span style="color: #cccccc; font-size: 11px; font-family: arial; font-weight: normal; margin-top: 0;"><a style="color: #cccccc;" href="#" title="Twitter" >Follow us on Twitter</a></span>  
                 </p> 
                 <p style="color: #cccccc; font-size: 11px; font-family: arial; font-weight: normal; margin-top: 0; margin-bottom: 5px;"> 
                  <img style="border:0; display: inline-block; margin-right: 5px; vertical-align: middle;" src="youtube.png" alt="Youtube" /><span style="color: #cccccc; font-size: 11px; font-family: arial; font-weight: normal; margin-top: 0;"><a style="color: #cccccc;" href="https://www.google.co.uk/" title="Youtube" >Watch us on Youtube</a></span>  
                 </p> 
                </div> 
               </td> 

Le « vertical-align: milieu; » le style ne fonctionne pas dans Outlook 2007/2010 et le texte à côté de l'image apparaît sous l'image. Est-ce que quelqu'un sait d'un travail autour de faire aligner le texte au milieu de l'image? Cela fonctionne bien dans d'autres clients de messagerie. C'est juste Outlook qui cause des problèmes.

Answer 1

Je n'ai jamais réussi à utiliser l'instruction "vertical-align" dans Outlook. Je fait table pour ce hack, mais il pas vraiment facile

Answer 2

Essayez cette

<td align="left" valign="top" bgcolor="#666f87" style="background: #666f87;"> 
<table border="0" cellpadding="0" cellspacing="0" align="left" > 
    <tr> 
     <td align="left" colspan="3"> 
      <font style="color: #cccccc; font-size: 11px; font-family: arial; font-weight: normal; margin-bottom: 10px; margin-top: 0;"> 
       <strong>Social Media:</strong> 
      </font> 
     </td> 
    </tr> 
    <tr> 
     <td align="left"> 
      <img style="border:0; display: inline-block;" src="facebook.png" alt="Facebook" /> 
     </td> 
     <td width="5" /> 
     <td align="left"> 
      <span style="color: #cccccc; font-size: 11px; font-family: arial; font-weight: normal; margin-top: 0;"> 
       <a style="color: #cccccc;" href="#" title="Facebook" > 
       Become a fan on Facebook 
       </a> 
     </span> 
     </td> 
    </tr> 
    <tr> 
     <td align="left" colspan="3" height="5" /> 
    </tr> 
    <tr> 
     <td align="left" valign="middle"> 
      <img style="border:0; display: inline-block;" src="twitter.png" alt="Twitter" /> 
     </td> 
     <td width="5" /> 
     <td align="left"> 
      <span style="color: #cccccc; font-size: 11px; font-family: arial; font-weight: normal; margin-top: 0;"> 
       <a style="color: #cccccc;" href="#" title="Twitterk" > 
        Follow us on Twitter 
       </a> 
      </span> 
     </td> 
    </tr> 
    <tr> 
     <td align="left" colspan="3" height="5" /> 
    </tr> 
    <tr> 
     <td align="left" valign="middle"> 
      <img style="border:0; display: inline-block;" src="youtube.png" alt="Youtube" /> 
     </td> 
     <td width="5" /> 
     <td align="left"> 
      <span style="color: #cccccc; font-size: 11px; font-family: arial; font-weight: normal; margin-top: 0;"> 
       <a style="color: #cccccc;" href="https://www.google.co.uk/" title="Youtube" > 
        Watch us on Youtube 
       </a> 
      </span> 
     </td> 
    </tr> 
</table>