邮件模板中如何避免上方表格行图片干扰下方文本居中？

你遇到的问题根源在于右侧图片使用了float: right，浮动元素会脱离正常文档流，导致它所在的父容器（包括外层的<td>和<tr>）无法被正确撑开高度，进而干扰了下方表格行的布局逻辑。再加上下方文本所在的<td>没有跨列，自然没法在整个表格宽度内居中。

下面是具体的修复步骤和优化后的代码：

核心修改点 #

• 移除.img-right的float: right属性，改用表格原生的align属性实现靠右对齐（邮件模板里尽量避免用float，兼容性极差）
• 给下方文本所在的<td>添加colspan="2"，让它横跨两列，保证文本能在整个表格宽度内居中
• 清理多余的定位属性，用更稳妥的表格布局逻辑替代

修改后的CSS #

@import url('https://fonts.googleapis.com/css?family=Open+Sans');
* {
  font-family: 'Open Sans', sans-serif;
}
.main-text {
  padding-bottom: 45px;
  margin: 0 auto;
}
#main {
  background: lightblue;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  margin-left: auto;
  margin-right: auto;
  width: 620px;
}
table {
  font-family: sans-serif;
}
.img-left {
  padding: 20px 20px 80px 40px;
}
.img-right {
  width: 85px;
  padding: 15px 30px;
  /* 移除了float、position和right属性 */
}

修改后的HTML #

<table id="main" border="0" cellpadding="0" cellspacing="0" id="templateColumns">
  <tr class="header-test">
    <td align="center" valign="top" width="50%" class="templateColumnContainer img-left">
      <table border="0" cellpadding="10" cellspacing="0" width="100%">
        <tr>
          <td class="leftColumnContent" style="padding-top: 5px;">
            <img src="http://via.placeholder.com/350x150" width="210" style="max-width:210px; position: relative; left: -15px;" class="columnImage" />
          </td>
        </tr>
      </table>
    </td>
    <td align="right" valign="top" width="50%" class="templateColumnContainer">
      <!-- 用td的align="right"替代float:right实现靠右 -->
      <table border="0" cellpadding="10" cellspacing="0" width="100%">
        <tr>
          <td class="rightColumnContent">
            <a href="#" target="_blank">
              <img src="http://via.placeholder.com/350x150" width="85" class="columnImage img-right" />
            </a>
          </td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <!-- 添加colspan="2"让td横跨两列，确保文本在整个表格宽度居中 -->
    <td align="center" colspan="2" style="width: 100%;">
      <table style="margin: 0 auto;">
        <tr>
          <td></td>
          <td class="main-text" style="color: #ffffff; text-align: center">
            <p style="font-size: 12px; line-height: 1;">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Natus, veniam sint? Ducimus eius necessitatibus minima nemo ratione. Nam atque aliquam quia itaque, explicabo qui, fuga alias unde nulla quo quaerat.</p>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

额外提醒 #

在邮件模板开发中，尽量优先使用表格的原生属性（比如align、valign、colspan）来布局，避免使用CSS浮动、定位等特性——很多主流邮件客户端对这些CSS特性的支持非常不稳定，很容易出现各种布局错乱问题。这样修改后，图片不会再影响下方文本的居中，同时兼容性也会更好。

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