垂直对齐相邻 table 个单元格中不同字体大小的文本

Question

我正在尝试将 html 电子邮件中相邻 table 单元格中包含的不同字体大小的文本底部对齐。

代码：

<tr>
  <td>
    <table cellspacing="0" cellpadding="0" border="0">
     <tbody>
       <tr>
         <td style="font-size: 40px; font-family: Calibri, Arial, Helvetica, sans-serif; color:#35C7E0; font-weight: bold; mso-line-height-rule:exactly; line-height: 40px;" valign="bottom">2.</td>
         <td width="15" style="width: 15px; font-size: 18px; line-height: 40px;">&nbsp;</td>
         <td style="font-family: Arial, sans-serif; font-size: 18px; color: #35C7E0; text-align: left; mso-line-height-rule:exactly; line-height: 40px;"  valign="bottom">Product Demonstrations</td>
       </tr>
     </tbody>
    </table>
  </td>
</tr>

我的问题是第二个单元格（产品演示）中的文本在 Outlook 2010 和 2013 中看起来比第一个单元格中的“2”低，但在 Outlook 2011 和 2016 中看起来很好。我该如何修复它在所有 Outlook 版本中，文本在底部看起来统一对齐？

Answer 1

Outlook 2007-10-13 不理解文本中的 valign=bottom，因此您需要在上一个 td 中添加另一个 table，并使之成为 table valign=bottom。我还添加了一些 padding-bottom，使其与“2”对齐。

<table cellspacing="0" cellpadding="0" border="0">
<tr>
    <td>
        <table cellspacing="0" cellpadding="0" border="0">
            <tbody>
                <tr>
                    <td style="font-size: 40px; font-family: Calibri, Arial, Helvetica, sans-serif; color:#35C7E0; font-weight: bold; mso-line-height-rule:exactly; line-height: 40px;" valign="bottom">2.</td>
                    <td width="15" style="width: 15px; font-size: 18px; line-height: 40px;">&nbsp;</td>
                    <td valign="bottom">
                        <table cellspacing="0" cellpadding="0" border="0">
                            <tr>
                                <td style="font-family: Arial, sans-serif; font-size: 18px; color: #35C7E0; text-align: left; mso-line-height-rule:exactly; line-height: 100%; padding-bottom: 5px"> Lorem ipsum
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </tbody>
        </table>
    </td>
</tr>

垂直对齐相邻 table 个单元格中不同字体大小的文本

Vertically align text of different font sizes in adjoining table cells

outlook

html-table

font-size

vertical-alignment

html-email