在相邻表格单元格中垂直对齐不同字体大小的文本答案

【问题标题】：Vertically align text of different font sizes in adjoining table cells在相邻表格单元格中垂直对齐不同字体大小的文本
【发布时间】：2017-06-25 21:06:21
【问题描述】：

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

代码：

<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 版本中看起来都在底部对齐？

【问题讨论】：

标签： outlook html-table html-email vertical-alignment font-size

【解决方案1】：

Outlook 2007-10-13 不理解文本上的 valign=bottom，因此您需要在最后一个 td 中使用另一个表，并使该表 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>

【讨论】：