Outlook 2007/2010 中的垂直对齐

Question

我有一个 html 时事通讯，它适用于大多数电子邮件运营商，但格式在 Outlook 中被弄乱了。这是电子邮件的 sn-p，因为这是唯一正在播放的部分：

<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 中使用“垂直对齐”语句。 我做了一个表来破解这个，但这并不容易

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>