Outlook桌面端HTML图片与文本垂直居中失效问题求助

问题原因 #

Outlook桌面端采用Word的HTML渲染引擎，对CSS行内元素垂直对齐支持存在缺陷：

• vertical-align: middle在图片与文本同属一个<td>时，无法被Outlook正确解析。
• float、valign属性因单单元格混排的容器结构限制，在Outlook中无法生效。

修复方案 #

利用Outlook对表格布局的完美支持，将图片和文本拆分到同一行的两个独立单元格中，通过表格原生的valign属性实现垂直居中，同时保留CSS属性兼容其他客户端。

修改后的核心代码 #

<tr>
  <td style="padding-bottom: 15px; padding-top:10px;" valign="middle">
    <table border="0" cellpadding="0" cellspacing="0" role="presentation">
      <tr>
        <!-- 图片单元格 -->
        <td valign="middle" width="40" style="vertical-align: middle; padding-right: 10px;">
          <img alt="" data-assetid="1800" height="40" src="https://image.eu.email.maxi-cosi.com/lib/fe3111737364047f731173/m/1/0262ebcf-0222-4936-9a87-f5709e42741c.png" style="padding: 0px; height: 40px; width: 40px; border: 0px;" width="40">
        </td>
        <!-- 文本单元格 -->
        <td valign="middle" style="font-size: 16px; font-weight: normal; vertical-align: middle;">
          Revolutionary technology makes<br>
          <br>
          &nbsp;
        </td>
      </tr>
    </table>
  </td>
</tr>

关键修改点 #

• 将图片和文本分别放入同一<tr>下的两个<td>，通过<td valign="middle">实现Outlook原生垂直对齐。
• 给图片单元格设置固定宽度width="40"，并添加padding-right控制图片与文本的间距。
• 同时保留style="vertical-align: middle"，确保非Outlook客户端的兼容性。

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