移动端文本表格居中且文本左对齐的邮件布局适配问询

Hey there! Let's sort out this email layout issue—Outlook's quirks can be so frustrating, right? I've got a tested solution that checks all your boxes: desktop two-column layout with left-aligned text, mobile view where the text block is centered (but internal text stays left-aligned), and proper image hiding on mobile that works even in Outlook.

核心修改思路 #

• Outlook友好的图片隐藏: 用条件注释完全屏蔽Outlook桌面端的图片区块，搭配媒体查询样式覆盖其他客户端，双重保险避免布局错乱。
• 移动端文本居中+内部左对齐: 给文本表格套一个容器，移动端用margin: 0 auto实现整体居中，同时锁定内部文本的左对齐属性。
• 告别内容挤压: 放弃固定宽度间隔条，改用流体百分比宽度+可控边距，既保留桌面端两列布局，又保证移动端内容可读性。

修改后的完整代码 #

<style type="text/css">
body { margin: 0 !important; padding: 0 !important; -webkit-text-size-adjust: 100% !important; -ms-text-size-adjust: 100% !important; -webkit-font-smoothing: antialiased !important; }
img { border: 0 !important; outline: none !important; }
p { Margin: 0px !important; Padding: 0px !important; }
table { border-collapse: collapse; mso-table-lspace: 0px; mso-table-rspace: 0px; }
td, a, span { border-collapse: collapse; mso-line-height-rule: exactly; }
.ExternalClass * { line-height: 100%; }
.em_grey a { color: #797979 !important; text-decoration: none !important; }
span.MsoHyperlink { mso-style-priority: 99; color: inherit; }
span.MsoHyperlinkFollowed { mso-style-priority: 99; color: inherit; }

/* 默认桌面端样式 */
.text-container {
  width: 343px;
  float: left;
}
.image-container {
  width: 246px;
  float: right;
}

/* 平板断点 (481px - 599px) */
@media only screen and (min-width:481px) and (max-width:599px) {
  .em_wrapper { width: 100% !important; }
  .em_aside { padding: 0px 17px !important; }
  .em_aside1 { padding: 0px 20px!important; }
  .em_hide { 
    overflow:hidden !important; 
    float:left !important; 
    display:none !important; 
    line-height:0px !important; 
    mso-hide: all !important; 
  }
  .em_hide_desktop { 
    overflow: visible !important; 
    float: none !important; 
    display: block !important; 
    line-height:100% !important; 
    max-height:100% !important; 
  }
  .text-container {
    width: 90% !important;
    float: none !important;
    margin: 0 auto !important;
  }
  .em_left { text-align: left !important; }
  .em_height { height: 20px !important; font-size: 1px !important; line-height: 1px !important; }
  .em_height30 { height: 30px !important; }
  .em_width26 { width: 26px !important; }
  .em_padtop { padding-top: 40px !important; }
}

/* 移动端断点 (0px - 480px) */
@media only screen and (max-width:480px) {
  .em_wrapper { width: 100% !important; }
  .em_aside { padding: 10px 17px !important; }
  .em_aside1 { padding: 0px 20px !important; }
  .em_hide { 
    overflow:hidden !important; 
    float:left !important; 
    display:none !important; 
    line-height:0px !important; 
    mso-hide: all !important; 
  }
  .em_hide_desktop { 
    overflow: visible !important; 
    float: none !important; 
    display: block !important; 
    line-height:100% !important; 
    max-height:100% !important; 
  }
  .text-container {
    width: 90% !important;
    float: none !important;
    margin: 0 auto !important;
  }
  .em_left { text-align: left !important; }
  .em_height { height: 20px !important; font-size: 1px !important; line-height: 1px !important; }
  .em_height30 { height: 30px !important; }
  .em_width26 { width: 26px !important; }
  .em_padtop { padding-top: 40px !important; }
}
</style>
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
</head>
<body style="margin:0px; padding:0px;" bgcolor="#ffffff">
<!--Full width table start-->
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
  <tr>
    <td align="center" valign="top">
      <table width="600" border="0" align="center" class="em_wrapper" cellpadding="0" cellspacing="0" style="table-layout:fixed; width:600px;">
        <tr>
          <td valign="top">
            <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" class="em_wrapper" style="width:600px;">
              <tbody>
                <tr>
                  <td valign="top" align="center">
                    <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" class="em_wrapper" style="width:600px;">
                      <tbody>
                        <tr>
                          <!-- 文本区块容器 -->
                          <td class="text-container">
                            <table cellpadding="0" cellspacing="0" border="0" width="100%">
                              <tr>
                                <td class="em_aside1" style="padding: 20px 20px">
                                  <table cellpadding="0" cellspacing="0" border="0" style="border:1px solid #ffffff">
                                    <tr>
                                      <td bgcolor="#ffffff" valign="top" align="left" class="em_grey" style="padding:0px 0px 0px 0px; font-family:'Int Circular PPT Book', Gotham, Arial, sans-serif; font-size:14px; line-height:24px; color:#BCBCBC;">
                                        <em>My wife and I were out of town when the doorbell ringing feature popped up on my app. I answered through the two-way talk and a suspicious man asked if this was a certain address. I told him that it wasn't. He noticed the voice was coming from a doorbell camera and abruptly stated thank you and left. The next day I read on our neighborhood's watch blog that there was a man going around breaking in if people weren't home. I'm so glad that we have this system, otherwise I feel like we would have been his next victim. <br /></em><br />
                                      </td>
                                    </tr>
                                    <tr>
                                      <td bgcolor="#ffffff" valign="top" align="right" class="em_grey" style="padding:0px 0px 0px 0px; font-family:'Int Circular PPT Book', Gotham, Arial, sans-serif; font-size:14px; line-height:24px; color:#BCBCBC;">
                                        <em>– Frank, TX</em>
                                      </td>
                                    </tr>
                                  </table>
                                </td>
                              </tr>
                            </table>
                          </td>
                          <!-- 图片区块（移动端隐藏，适配Outlook） -->
                          <!--[if !mso]><!-->
                          <td class="image-container em_hide">
                            <table cellpadding="0" cellspacing="0" border="0" style="border:1px solid #ffffff;">
                              <tr>
                                <td height="52">&nbsp;</td>
                              </tr>
                              <tr>
                                <td valign="center" align="right" class="em_aside1" width="246">
                                  <img src="https://wwwassets.s3.amazonaws.com/global/email/My%20Story%202018/2.14%20Send%20Image.jpg" width="244" height="275" alt="User testimonial image">
                                </td>
                              </tr>
                            </table>
                          </td>
                          <!--<![endif]-->
                        </tr>
                      </tbody>
                    </table>
                  </td>
                </tr>
              </tbody>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
</body>

关键细节说明 #

1. Outlook图片隐藏: <!--[if !mso]><!-->条件注释让Outlook桌面端直接忽略图片区块，彻底解决之前“移动端区块未隐藏”的问题；.em_hide媒体查询样式则负责其他移动端客户端的隐藏逻辑。
2. 移动端文本居中: .text-container类在移动端设置为90%宽度+margin: 0 auto，实现整个文本区块居中；内部文本通过表格单元格的align="left"属性保持左对齐，不会破坏桌面端布局。
3. 避免内容挤压: 用流体百分比宽度替代固定间隔条，既保留了桌面端的两列布局，又让移动端文本区块有足够的呼吸空间，不会出现挤压变形。

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