表格居中时对齐两行内容 兼容多数邮件端不可用Flex的实现方案

问题原因 #

你原来的代码里给文本容器#img-text设置了width:100%，导致表格占满整个外层容器宽度，此时全局设置text-align:center会让每一行文本单独居中，无法实现「整个文本块居中、块内文本左对齐」的效果。

兼容方案（支持绝大多数邮件客户端，无Flex） #

核心逻辑：让包裹文本的表格宽度自适应内容，先保证整个表格在图片区域水平居中，再设置表格内部单元格左对齐。

修改后CSS代码 #

.outer {
  position:relative;
  background-color:red;
  display:block;
  width:650px;
  background-image:url(https://blog.prezi.com/wp-content/uploads/2019/03/1_pzUhL5WpOeViwICDDgiLUA.jpeg)
}
.inner {
  position:absolute;
  width:100px;
  height:50px;
  background-color:pink;
  display:block;
  bottom:-25px;
  right:50%;
  transform: translateX(50%);
  margin:auto;
  
}
.hidden{
  visibility:hidden;
}
#img-text{
  position:absolute;
  bottom:40px;
  left: 0;
  right: 0;
  margin: 0 auto;
  font-family:Arial, Helvetica, sans-serif;
  color:#ffffff;
  text-align: left;
}
/* 若需要20% OFF单独居中，保留以下样式，不需要可删除 */
#img-text .discount {
  text-align: center;
}

修改后HTML代码 #

<table width="100%" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td align="center">
      <div class="outer">
        <img class="hidden" src="https://blog.prezi.com/wp-content/uploads/2019/03/1_pzUhL5WpOeViwICDDgiLUA.jpeg" width="650" alt="活动背景图">
        <table id="img-text" align="center" cellpadding="2" cellspacing="0" border="0">
          <tr><td>8/30-9/1</td></tr>
          <tr><td>SUMMER CLEARANCE</td></tr>
          <tr><td class="discount"><h3>20% OFF</h3></td></tr>
        </table>
        <div class="inner">Hello</div>
      </div> 
    </td>
  </tr>
</table>

兼容说明 #

• 依赖表格原生对齐属性、绝对定位的margin:auto实现居中，无Flex/Grid等新布局属性，兼容Outlook、Gmail、国内主流邮箱等绝大多数邮件客户端
• 去掉了文本表格的100%宽度，让表格宽度匹配最长内容，既保证整个文本块水平居中，又能实现块内日期、活动名左对齐
• 外层表格新增cellpadding/cellspacing/border属性，避免邮件客户端默认样式干扰布局

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