Mailchimp自定义HTML图片行居中问题：预览正常测试邮件左对齐

问题出在哪 #

邮件客户端（尤其是Outlook这类老派客户端）对CSS Flexbox的支持极差。Mailchimp预览用的是现代浏览器，能正常解析flex，但实际发送后，邮件客户端不认flex布局，你的居中设置直接失效，图片就自动左对齐了。

直接上修复代码（改用表格布局，邮件开发的标准操作） #

把你原来的flex代码全部替换成下面的表格结构，所有主流邮件客户端都能正确渲染居中效果：

<!-- 顶部图片行 -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center">
  <tr>
    <td align="center">
      <table border="0" cellpadding="5" cellspacing="0" align="center">
        <tr>
          <td><img src="" alt="" style="max-width:125px; display:block;"></td>
          <td><img src="" alt="" style="max-width:125px; display:block;"></td>
          <td><img src="" alt="" style="max-width:125px; display:block;"></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

<!-- 底部图片行 -->
<table width="100%" border="0" cellpadding="8" cellspacing="0" align="center">
  <tr>
    <td align="center">
      <table border="0" cellpadding="5" cellspacing="0" align="center">
        <tr>
          <td><img src="" alt="" style="max-width:125px; display:block;"></td>
          <td><img src="" alt="" style="max-width:125px; display:block;"></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

关键细节解释 #

• 外层表格设width="100%"+align="center"，保证整个图片块在邮件容器里居中
• 内层表格用来排列图片，cellpadding="5"替代你原来的padding:5px
• 图片加display:block;是为了消除行内元素默认的底部间距
• 所有样式尽量写在元素的style属性里（内联样式），邮件客户端对外部/内部样式表支持不稳定

为啥之前的调整没用？ #

你试的vertical-align、display:block、margin:0 auto都是浏览器里的有效解法，但核心问题是邮件客户端不识别flex布局，整个布局框架都没生效，这些小调整当然起不了作用。

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