如何用内联CSS在邮件通讯中对齐图片与联系信息（兼容Outlook）

Outlook对现代CSS（比如flex）支持极差，必须依赖表格布局和内联样式才能实现稳定的对齐效果。以下是修改后的代码，完全适配Outlook：

<table role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0">
    <tr>
        <td bgcolor="#4A9FE8" style="padding: 10px;">
            <!-- 内层表格实现左右布局 -->
            <table role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0">
                <tr valign="middle"> <!-- 垂直居中对齐所有内容，可按需改为top/bottom -->
                    <!-- 左侧图片单元格 -->
                    <td style="width: 15%; padding-right: 10px;">
                        <img src="你的图片URL" alt="头像" width="100%" style="display: block; margin: 0;" />
                    </td>
                    <!-- 右侧联系信息单元格 -->
                    <td style="padding: 5px 0; vertical-align: middle;">
                        <h2 style="margin: 0 0 8px 0; font-size: 18px; color: black;">random guy</h2>
                        <p style="margin: 0 0 8px 0; color: black;">555.555.555</p>
                        <a href="mailto:email@email.com" style="color: black; display: block; margin: 0 0 12px 0;">email@email.com</a>
                        <!-- 用表格模拟按钮（Outlook不支持flex和button标签的复杂样式） -->
                        <table role="presentation" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                <td style="background: #fff; padding: 8px 16px; border-radius: 4px;">
                                    <a href="https://你的链接地址" style="color: black; text-decoration: none; font-weight: bold;">My Listing</a>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

关键修改说明：

• 用嵌套表格替代浮动/align属性：Outlook对表格布局支持最稳定，将图片和联系信息分放两个<td>，彻底解决文字堆叠问题
• 统一垂直对齐：通过valign="middle"（或top/bottom）确保左右单元格内容垂直对齐
• 替换flex按钮为表格按钮：Outlook完全不支持flex布局，表格模拟按钮能保证样式在所有客户端一致
• 全内联样式：所有样式写在元素style属性中，避免Outlook忽略外部/内部样式块
• 图片设置display: block：消除图片下方多余空白
• 重置默认边距：用内联样式清除标题、段落的默认margin，避免客户端样式差异

内容的提问来源于stack exchange，提问作者confusedcoder