邮件内联HTML中valign与vertical-align失效问题求助

AI 小北

2026-7-23

问题描述

我试过所有能想到的方法，但这个表格就是不响应任何HTML垂直对齐设置。我想要实现两个效果：一是图片在它的容器里垂直居中，二是文本所在的容器和图片所在的容器始终保持垂直对齐，不管文本内容长短。我已经试过用valign属性和vertical-align样式，但都没效果，我的代码如下：

<td class="esd-structure es-p20 esd-disabled-synchronizable-module" style="background-color: #ffffff;" align="left" esd-custom-block-id="888661" bgcolor="#ffffff" esdev-config="h242" valign="middle" style="vertical-align:center;">
    <!--[if mso]><table width="560" cellpadding="0" cellspacing="0"><tr><td width="221" valign="middle"><![endif]-->
    <table cellspacing="0" cellpadding="0" align="left" class="es-left">
        <tbody>
            <tr>
                <td width="221" align="left" class="esd-container-frame es-m-p20b" valign="middle" style="vertical-align:center;display:block;">
                    <table cellpadding="0" cellspacing="0" width="100%">
                        <tbody>
                            <tr>
                                <td align="center" valign="middle" class="esd-block-image" style="font-size: 0px;vertical-align:center;"><a target="_blank" href="https://www.fleetio.com/blog/preventive-maintenance-steps"><img class="b_image" style="border-radius: 8px; border: 1px solid #d3d9db; display: block;-ms-interpolation-mode: bicubic; clear: both;" src="https://gwkeib.stripocdn.email/content/guids/CABINET_04d24da76d8cebf505703de666f98595fc5ebca13962db87e524818ed4fe919c/images/placeholder.png" alt height="222"></a></td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
        </tbody>
    </table>
    <!--[if mso]></td><td width="20"></td><td width="319" valign="middle"><![endif]-->
    <table cellpadding="0" cellspacing="0" class="es-right" align="right">
        <tbody>
            <tr>
                <td class="esd-container-frame" width="319" align="left">
                    <table width="100%" cellspacing="0" cellpadding="0">
                        <tbody>
                            <tr>
                                <td align="left" class="esd-block-text es-m-txt-c">
                                    <h3 style="color: #f2aa2a; font-size: 16px;"><strong>Subhead</strong></h3>
                                </td>
                            </tr>
                            <tr>
                                <td class="esd-block-text es-m-txt-c es-p5t es-p5b" align="left">
                                    <h2 class="b_title">Process, Benefits and Solutions for Work Order Management</h2>
                                </td>
                            </tr>
                            <tr>
                                <td align="left" class="esd-block-text es-m-txt-c">
                                    <p class="b_read-time" style="color: #78858a;"><em>11 minute read</em></p>
                                </td>
                            </tr>
                            <tr>
                                <td class="esd-block-text es-m-txt-c es-p5t" align="left">
                                    <p class="b_description" style="color: #666666;">Manually tracking work orders through paper documents and spreadsheets can throw a wrench in service workflows. Digital work order management with software solutions help fleets improve workflow processes and collect reliable data in real time.</p>
                                </td>
                            </tr>
                            <tr>
                                <td align="left" class="esd-block-button es-m-txt-c es-p10t">
                                    <!--[if mso]><a href="https://www.fleetio.com/blog/preventive-maintenance-steps" target="_blank" hidden>    <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" esdevVmlButton href="https://www.fleetio.com/blog/preventive-maintenance-steps"                 style="height:24px; v-text-anchor:middle; width:121.5px" arcsize="0%" stroke="f"  fillcolor="#ffffff">        <w:anchorlock></w:anchorlock>        <center style='color:#07a252; font-family:roboto, "helvetica neue", helvetica, arial, sans-serif; font-size:9px; font-weight:700; line-height:9px;  mso-text-raise:1px'>Learn More</center>    </v:roundrect></a><![endif]-->
                                    <!--[if !mso]><!-- --><span class="msohide es-button-border-1681999201715 es-button-border" style="background: #ffffff; border-radius: 0px;"><a href="https://www.fleetio.com/blog/preventive-maintenance-steps" class="es-button es-button-1681999201715" target="_blank" style="font-weight: bold; font-size: 16px; background: #ffffff; border-color: #ffffff; color: #07a252; border-radius: 0px; padding: 0px 20px 0px 0px">Learn More<img src="https://gwkeib.stripocdn.email/content/guids/CABINET_04d24da76d8cebf505703de666f98595fc5ebca13962db87e524818ed4fe919c/images/rightarrow_y4G.png" alt="icon" class="esd-icon-right" align="absmiddle" style="margin-left: 4px;" height="24"></a></span>
                                    <!--<![endif]-->
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
        </tbody>
    </table>
    <!--[if mso]></td></tr></table><![endif]--></td>

问题分析

你的代码里有几个关键问题导致垂直对齐失效：

外层<td>重复定义了style属性，后面的vertical-align:center覆盖了前面的样式，但vertical-align没有center这个有效值，正确值应该是middle
图片所在的内层<td>设置了display:block，这会破坏表格单元格的默认布局规则，导致vertical-align完全不起作用
非Outlook（非MSO）环境下，左右两个表格靠align="left"和align="right"浮动排列，这种方式无法保证两者始终垂直对齐

修复方案

下面是修改后的代码，解决了上述问题：

<td class="esd-structure es-p20 esd-disabled-synchronizable-module" style="background-color: #ffffff; vertical-align: middle;" align="left" esd-custom-block-id="888661" bgcolor="#ffffff" esdev-config="h242">
    <!--[if mso]><table width="560" cellpadding="0" cellspacing="0"><tr><td width="221" valign="middle"><![endif]-->
    <table cellspacing="0" cellpadding="0" align="left" class="es-left" style="vertical-align: middle;">
        <tbody>
            <tr>
                <td width="221" align="left" class="esd-container-frame es-m-p20b" valign="middle" style="vertical-align: middle;">
                    <table cellpadding="0" cellspacing="0" width="100%">
                        <tbody>
                            <tr>
                                <td align="center" valign="middle" class="esd-block-image" style="font-size: 0px; vertical-align: middle;">
                                    <a target="_blank" href="https://www.fleetio.com/blog/preventive-maintenance-steps">
                                        <img class="b_image" style="border-radius: 8px; border: 1px solid #d3d9db; display: block;-ms-interpolation-mode: bicubic; clear: both;" src="https://gwkeib.stripocdn.email/content/guids/CABINET_04d24da76d8cebf505703de666f98595fc5ebca13962db87e524818ed4fe919c/images/placeholder.png" alt height="222">
                                    </a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
        </tbody>
    </table>
    <!--[if mso]></td><td width="20"></td><td width="319" valign="middle"><![endif]-->
    <table cellpadding="0" cellspacing="0" class="es-right" align="right" style="vertical-align: middle;">
        <tbody>
            <tr>
                <td class="esd-container-frame" width="319" align="left" valign="middle" style="vertical-align: middle;">
                    <table width="100%" cellspacing="0" cellpadding="0">
                        <tbody>
                            <tr>
                                <td align="left" class="esd-block-text es-m-txt-c">
                                    <h3 style="color: #f2aa2a; font-size: 16px;"><strong>Subhead</strong></h3>
                                </td>
                            </tr>
                            <tr>
                                <td class="esd-block-text es-m-txt-c es-p5t es-p5b" align="left">
                                    <h2 class="b_title">Process, Benefits and Solutions for Work Order Management</h2>
                                </td>
                            </tr>
                            <tr>
                                <td align="left" class="esd-block-text es-m-txt-c">
                                    <p class="b_read-time" style="color: #78858a;"><em>11 minute read</em></p>
                                </td>
                            </tr>
                            <tr>
                                <td class="esd-block-text es-m-txt-c es-p5t" align="left">
                                    <p class="b_description" style="color: #666666;">Manually tracking work orders through paper documents and spreadsheets can throw a wrench in service workflows. Digital work order management with software solutions help fleets improve workflow processes and collect reliable data in real time.</p>
                                </td>
                            </tr>
                            <tr>
                                <td align="left" class="esd-block-button es-m-txt-c es-p10t">
                                    <!--[if mso]><a href="https://www.fleetio.com/blog/preventive-maintenance-steps" target="_blank" hidden>
                                        <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" esdevVmlButton href="https://www.fleetio.com/blog/preventive-maintenance-steps" style="height:24px; v-text-anchor:middle; width:121.5px" arcsize="0%" stroke="f"  fillcolor="#ffffff">
                                            <w:anchorlock></w:anchorlock>
                                            <center style='color:#07a252; font-family:roboto, "helvetica neue", helvetica, arial, sans-serif; font-size:9px; font-weight:700; line-height:9px;  mso-text-raise:1px'>Learn More</center>
                                        </v:roundrect>
                                    </a><![endif]-->
                                    <!--[if !mso]><!-- -->
                                    <span class="msohide es-button-border-1681999201715 es-button-border" style="background: #ffffff; border-radius: 0px;">
                                        <a href="https://www.fleetio.com/blog/preventive-maintenance-steps" class="es-button es-button-1681999201715" target="_blank" style="font-weight: bold; font-size: 16px; background: #ffffff; border-color: #ffffff; color: #07a252; border-radius: 0px; padding: 0px 20px 0px 0px">Learn More
                                            <img src="https://gwkeib.stripocdn.email/content/guids/CABINET_04d24da76d8cebf505703de666f98595fc5ebca13962db87e524818ed4fe919c/images/rightarrow_y4G.png" alt="icon" class="esd-icon-right" align="absmiddle" style="margin-left: 4px;" height="24">
                                        </a>
                                    </span>
                                    <!--<![endif]-->
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
        </tbody>
    </table>
    <!--[if mso]></td></tr></table><![endif]-->
</td>

关键修改点

修复外层<td>重复的style属性，统一设置vertical-align: middle
移除图片所在<td>的display:block样式，恢复表格单元格默认布局
给左右两个外层表格添加style="vertical-align: middle;"，确保非Outlook环境下垂直对齐
给文本容器的外层<td>添加valign="middle"和style="vertical-align: middle;"，保证文本区域整体垂直居中

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

邮件内联HTML中valign与vertical-align失效问题求助

关键修改点 #

关键修改点