如何在表格中垂直居中显示图片而非顶部对齐？

API 探路者

2026-6-30

解决邮件模板中图片垂直居中的问题

我需要让左侧图片在300px高的容器里垂直居中，尝试给所在的<tr>标签添加valign="middle"但没有效果，相关代码如下：

<!-- D2 - BANNER - LIRT -->
<table align="center" bgcolor="#E4F4F4" cellpadding="0" cellspacing="0" class="container" role="presentation" style="background-color: #E4F4F4 !important;" width="600">
  <tr>
    <td class="padding-lr_20">
      <table align="center" border="0" cellpadding="0" cellspacing="0" class="container" width="600">
        <tr>
          <td align="center">
            <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
              <tr>
                <td align="center">
                  <table align="center" border="0" cellpadding="0" cellspacing="0" class="container h-auto" height="300" width="600">

                    <tr valign="bottom">
                      <td align="center">
                        <!--LEFT-->
                        <table align="left" border="0" cellpadding="0" cellspacing="0" class="container" width="300">

                          <tr>
                            <td align="center" width="100%">
                              <a alias="Body-Image" conversion="false" data-linkto="https://" href="[link goes here]" style="color: #000000; font-family: sans-serif;text-align: center; text-decoration: none; display: block;"><img alt="[add alt text here]" class="content-image" src="https://dummyimage.com/300x100" style="display: block;width:100%" width="300"> </a>
                            </td>
                          </tr>
                        </table>
                        <!--//LEFT-->
                        <!--[if gte mso]>
                  </td>
                 <td valign="top">
                   <![endif]-->
                        <!--RIGHT-->
                        <table align="right" border="0" cellpadding="0" cellspacing="0" class="container h-auto" height="300" width="300">

                          <tr valign="middle">
                            <td align="center" class="padding-tp_20 padding-lr_0" style="padding: 0 32px;" width="265">
                              <!--[if mso]>
                    <div style="padding-top:20px;"></div>
                    <![endif]-->
                              <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">

                                <tr>
                                  <td align="center" class="h1 text-center" style="font-family:  sans-serif;font-size: 26px;line-height: 30px;color: #000000;font-weight: 700;letter-spacing: -.02em; text-align:left;">
                                    Text Text Text Text Text Text </td>
                                </tr>
                                <tr>
                                  <td align="center" class="body_text text-center" style="font-family:  sans-serif;font-size: 16px;line-height: 22px;color: #000000;font-weight: 400; text-align:left;padding-top: 20px;padding-bottom: 20px;">
                                    Text Text Text Text Text Text Text Text Text </td>
                                </tr>
                              </table>
                            </td>
                          </tr>
                        </table>
                        <!--//RIGHT-->
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
<table align="center" bgcolor="#ffffff" cellpadding="0" cellspacing="0" class="container" role="presentation" style="background-color: #ffffff !important;" width="600">
  <tr>
    <td style="padding-top: 40px;">
    </td>
  </tr>
</table>
<!-- //D2 - BANNER - LIRT -->

解决步骤：

修改最外层父行的对齐方式：将<tr valign="bottom">改为<tr valign="middle">，确保整个容器行的垂直对齐为居中
给左侧图片所在表格添加属性：在左侧<table align="left"...>标签中加入height="300"和valign="middle"，让表格填满容器高度并居中内部内容
兼容Outlook客户端：把MSO条件注释里的<td valign="top">改为<td valign="middle">，避免Outlook显示异常

修改后的完整代码：

<!-- D2 - BANNER - LIRT -->
<table align="center" bgcolor="#E4F4F4" cellpadding="0" cellspacing="0" class="container" role="presentation" style="background-color: #E4F4F4 !important;" width="600">
  <tr>
    <td class="padding-lr_20">
      <table align="center" border="0" cellpadding="0" cellspacing="0" class="container" width="600">
        <tr>
          <td align="center">
            <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
              <tr>
                <td align="center">
                  <table align="center" border="0" cellpadding="0" cellspacing="0" class="container h-auto" height="300" width="600">

                    <tr valign="middle">
                      <td align="center">
                        <!--LEFT-->
                        <table align="left" border="0" cellpadding="0" cellspacing="0" class="container" height="300" valign="middle" width="300">

                          <tr>
                            <td align="center" width="100%">
                              <a alias="Body-Image" conversion="false" data-linkto="https://" href="[link goes here]" style="color: #000000; font-family: sans-serif;text-align: center; text-decoration: none; display: block;"><img alt="[add alt text here]" class="content-image" src="https://dummyimage.com/300x100" style="display: block;width:100%" width="300"> </a>
                            </td>
                          </tr>
                        </table>
                        <!--//LEFT-->
                        <!--[if gte mso]>
                  </td>
                 <td valign="middle">
                   <![endif]-->
                        <!--RIGHT-->
                        <table align="right" border="0" cellpadding="0" cellspacing="0" class="container h-auto" height="300" width="300">

                          <tr valign="middle">
                            <td align="center" class="padding-tp_20 padding-lr_0" style="padding: 0 32px;" width="265">
                              <!--[if mso]>
                    <div style="padding-top:20px;"></div>
                    <![endif]-->
                              <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">

                                <tr>
                                  <td align="center" class="h1 text-center" style="font-family:  sans-serif;font-size: 26px;line-height: 30px;color: #000000;font-weight: 700;letter-spacing: -.02em; text-align:left;">
                                    Text Text Text Text Text Text </td>
                                </tr>
                                <tr>
                                  <td align="center" class="body_text text-center" style="font-family:  sans-serif;font-size: 16px;line-height: 22px;color: #000000;font-weight: 400; text-align:left;padding-top: 20px;padding-bottom: 20px;">
                                    Text Text Text Text Text Text Text Text Text </td>
                                </tr>
                              </table>
                            </td>
                          </tr>
                        </table>
                        <!--//RIGHT-->
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
<table align="center" bgcolor="#ffffff" cellpadding="0" cellspacing="0" class="container" role="presentation" style="background-color: #ffffff !important;" width="600">
  <tr>
    <td style="padding-top: 40px;">
    </td>
  </tr>
</table>
<!-- //D2 - BANNER - LIRT -->

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

如何在表格中垂直居中显示图片而非顶部对齐？

解决步骤： #

解决步骤：