Question

我正在尝试底部对齐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版本的底部均匀对齐？

Answer 1

Outlook 2007-10-13 dosnt理解valign =文本底部，所以你需要在你最后一个td中的另一个表，并使该表valign = 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>

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

1 个答案: