无需Flexbox实现HTML邮件通讯中图片的垂直对齐

HTML邮件布局里要实现两列内容垂直居中，核心是利用表格的vertical-align: middle属性，而且必须用内联样式（多数邮件客户端不支持类选择器的样式），具体修改如下：

关键修改步骤 #

• 给包裹两个列表格的父<td>添加内联样式：

  <td class="two-columns last" style="vertical-align: middle;">
  

• 给每个列的<table>添加内联样式：

  <table class="column" style="vertical-align: middle;">
  

• 给图片所在的内层<td>添加内联样式，确保图片在单元格内垂直居中：

  <td style="vertical-align: middle;">
      <a href="LINK"><img src="img/2022-Fright-Night.png" alt="" width="260" style="max-width:260px;"></a>
  </td>
  

修改后的完整两列代码片段 #

<!-- TWO COLUMN SECTION -->
<tr>
    <td style="background-color: #26292b; color: #ffffff;">
        <table width="100%">
            <tr>
                <td class="two-columns last" style="vertical-align: middle;">

                    <table class="column" style="vertical-align: middle;">
                        <tr>
                            <td class="padding">
                                <table class="content">
                                    <tr>
                                        <td style="vertical-align: middle;">
                                            <a href="LINK"><img src="img/2022-Fright-Night.png" alt="" width="260" style="max-width:260px;"></a>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>

                    <table class="column" style="vertical-align: middle;">
                        <tr>
                            <td class="padding">
                                <table class="content">
                                    <tr>
                                        <td>
                                            <p style="font-weight: bold; font-size: 18px;">Fright Night</p>
                                            <p style="padding-bottom: 16px;">Do you like chills and fright? Then, join St. Auggies' youth at Frontier City's Fright Night on Friday, October 28 from
                                            6:00pm-10:00pm. Tickets are $42.99/per person. Open to youth and adults 12 & up.</p>
                                                <a href="LINK" class="button">Sign Up</a>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>

                </td>
            </tr>
        </table>
    </td>
</tr>

原理说明 #

邮件客户端对CSS的支持非常有限，类选择器（比如你写的.two-columns）经常会被忽略，所以必须把垂直对齐的样式内联到对应的表格元素上。vertical-align: middle会让表格单元格或inline-table元素在垂直方向上居中对齐，从而实现图片和右侧文本的垂直居中效果。

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