Outlook客户端HTML签名图标旁内容未垂直居中问题求助

Outlook桌面版（Windows）采用Word的HTML渲染引擎，对现代CSS支持极差，这就是你本地Chrome显示正常但Outlook里失效的核心原因。以下是针对性的解决方法：

核心修复思路：改用表格布局 #

放弃flex、inline-block + vertical-align这类现代布局方式，用Outlook最兼容的表格实现垂直居中：

错误写法（不兼容Outlook） #

<div style="display: inline-block; vertical-align: middle;">
  <img src="your-icon.png" alt="icon">
</div>
<div style="display: inline-block; vertical-align: middle;">
  联系电话：123456789
</div>

兼容Outlook的正确写法 #

<table cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;">
  <tr>
    <!-- 图标单元格，设置垂直居中+右侧间距 -->
    <td valign="middle" style="padding-right: 10px;">
      <img src="your-icon.png" alt="icon" style="border: 0; margin: 0; line-height: 1;">
    </td>
    <!-- 文字单元格，设置垂直居中 -->
    <td valign="middle" style="font-size: 14px; color: #333;">
      联系电话：123456789
    </td>
  </tr>
</table>

额外注意事项 #

• 所有样式尽量用行内样式，Outlook会忽略<style>标签里的大部分规则。
• 图片必须加border: 0，否则Outlook会自动给图片加边框。
• 间距用单元格的padding控制，不要用margin，Outlook对margin支持不稳定。
• 不要设置固定行高，靠表格的valign="middle"配合内容自然高度实现居中。

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