Outlook 2007/2010의 세로 맞춤

Question

저는 대부분의 이메일 사업자에서 작동하는 HTML 뉴스 레터를 가지고 있지만 형식은 Outlook에서 엉망입니다.

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

이 유일한 최대 재생되는 부분으로 여기에 이메일의 조각은 "수직 정렬 : 중간;" 스타일은 Outlook 2007/2010에서 작동하지 않으며 이미지 옆의 텍스트가 이미지 아래에 나타납니다. 누구든지 이미지의 중간에 텍스트가 정렬되도록하는 방법을 알고 있습니까? 그것은 다른 이메일 클라이언트에서 잘 작동합니다. 그것은 단지 문제를 일으키는 Outlook입니다.

Answer 1

Outlook에서 "vertical-align"문을 사용하는 것은 결코 성공하지 못했습니다. 나는 해킹이를위한 테이블을 만든하지만 정말 쉬운

Answer 2

는이

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