我有一封响应式电子邮件(内联电子邮件 css)，其中有 2 列，第 2 列中的文本未与图标居中对齐。有什么建议吗？
这似乎只发生在 Outlook 07 和 2013 中。通过 Litmus 运行时在其他浏览器和电子邮件客户端中看起来很好
<!-- Invite Information with icons -->
<table class="outer" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 600px; padding: 0;">
<tr align="center" style="vertical-align: top; text-align: left; padding: 0;">
<td class="center" align="center" valign="top" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: center; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0;">
<center style="width: 100%; min-width: 580px;">
<table class="container" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: inherit; width: 508px; margin: 0 auto; padding: 0;">
<tr style="vertical-align: top; text-align: left; padding: 0;" align="left">
<td style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0;" align="left" valign="top">
<table class="row" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; position: relative; display: block; padding: 0px;">
<tr style="vertical-align: top; text-align: left; padding: 0;" align="left">
<td class="wrapper last" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; position: relative; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 10px 0px 0px;" align="left" valign="top">
<table class="twelve columns" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 508px; margin: 0 auto; padding: 0;">
<tr style="vertical-align: top; text-align: left; padding: 0;" align="left">
<td class="text-pad" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0px 10px 10px;" align="left" valign="top">
<table class="full-table" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; padding: 0;">
<tr style="vertical-align: top; text-align: left; padding: 0;" align="left">
<td width="65" class="icon" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0px 0px 10px;" align="left" valign="top">
<img src="http://images.response.vodafoneglobalenterprise.com/EloquaImages/clients/VodafoneGroupPLC/{24ee00f3-6d64-4acd-8b11-6458bd6a03c9}_icn-calendar.png" alt="" style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; width: auto; max-width: 100%; float: left; clear: both; display: block;" align="left">
</td>
<td valign="middle" class="text-pad-left icon-text" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0px 0px 10px 10px;" align="left">
<h5 elq-edit="true" class='eloqua-editable-content' style="color: #222222; font-family: 'Arial Bold', Arial, Helvetica, sans-serif; font-weight: bold; text-align: left; line-height: 1.3; word-break: normal; font-size: 22px; margin: 15px 0 0; padding: 0;" align="left">Friday, 11<sup>th</sup> - 13<sup>th</sup> September 2015</h5>
</td>
</tr>
<tr style="vertical-align: top; text-align: left; padding: 0;" align="left">
<td width="65" class="icon" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0px 0px 10px;" align="left" valign="top">
<img src="http://images.response.vodafoneglobalenterprise.com/EloquaImages/clients/VodafoneGroupPLC/{e02be391-bab6-4cf4-84a2-9ff6ca979b58}_icn-clock.png" alt="" style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; width: auto; max-width: 100%; float: left; clear: both; display: block;" align="left">
</td>
<td valign="middle" class="text-pad-left icon-text" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0px 0px 10px 10px;" align="left">
<h5 elq-edit="true" class='eloqua-editable-content' style="color: #222222; font-family: 'Arial Bold', Arial, Helvetica, sans-serif; font-weight: bold; text-align: left; line-height: 1.3; word-break: normal; font-size: 22px; margin: 15px 0 0; padding: 0;" align="left">7.00pm - Welcome Party</h5>
</td>
</tr>
<tr style="vertical-align: top; text-align: left; padding: 0;" align="left">
<td width="65" class="icon" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0px 0px 10px;" align="left" valign="top">
<img src="http://images.response.vodafoneglobalenterprise.com/EloquaImages/clients/VodafoneGroupPLC/{3a92ceeb-920c-48c8-b125-8877d00fcbe6}_icn-location-marker.png" alt="" style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; width: auto; max-width: 100%; float: left; clear: both; display: block;" align="left">
</td>
<td valign="middle" class="text-pad-left icon-text" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0px 0px 10px 10px;" align="left">
<h5 elq-edit="true" class='eloqua-editable-content' style="color: #222222; font-family: 'Arial Bold', Arial, Helvetica, sans-serif; font-weight: bold; text-align: left; line-height: 1.3; word-break: normal; font-size: 22px; margin: 15px 0 0; padding: 0;" align="left">Evian Resort Hotel</h5>
</td>
</tr>
</table>
</td>
<td class="expander" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; visibility: hidden; width: 0px; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0;" align="left" valign="top"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
<!-- END Invite Information with icons -->最佳答案
我正在使用 Zurb 的 Ink 框架。通过一些模组，我能够利用子列/子网格功能。
<!-- Invite Information with icons -->
<table class="outer" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 600px; padding: 0;">
<tr align="center" style="vertical-align: top; text-align: left; padding: 0;">
<td class="center" align="center" valign="top" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: center; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0;">
<center style="width: 100%; min-width: 580px;">
<table class="container" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: inherit; width: 508px; margin: 0 auto; padding: 0;">
<tr style="vertical-align: top; text-align: left; padding: 0;" align="left">
<td style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0;" align="left" valign="top">
<!-- Start Row -->
<table class="row" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; position: relative; display: block; padding: 0px;">
<tr style="vertical-align: top; text-align: left; padding: 0;" align="left">
<td class="wrapper last" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; position: relative; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 10px 0px 0px;" align="left" valign="top">
<table class="twelve columns" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 508px; margin: 0 auto; padding: 0;">
<tr style="vertical-align: top; text-align: left; padding: 0;" align="left">
<td class="two sub-columns center" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: center; min-width: 0px; width: 16.666666%; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0px 10px 10px 0px;" align="center" valign="top">
<center style="min-width: 65px; width: 100%;">
<img src="http://images.response.vodafoneglobalenterprise.com/EloquaImages/clients/VodafoneGroupPLC/{24ee00f3-6d64-4acd-8b11-6458bd6a03c9}_icn-calendar.png" alt="" style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; width: auto; max-width: 100%; float: left; clear: both; display: block;" align="center">
</center>
</td>
<td class="ten sub-columns" valign="middle" style="vertical-align: middle; word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; text-align: left; min-width: 0px; width: 83.333333%; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0px 10px 10px 0px;" align="left">
<h5 elq-edit="true" style="font-size: 22px; color: #222222; font-family: 'Arial Bold', Arial, Helvetica, sans-serif; font-weight: bold; text-align: left; line-height: 1.3; word-break: normal; margin: 0; padding: 0;" align="left">Friday, 11<sup>th</sup> - 13<sup>th</sup> September 2015</h5>
</td>
<td class="expander" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; visibility: hidden; width: 0px; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0;" align="left" valign="top"></td>
</tr>
</table>
</td>
</tr>
</table>
<!-- END row -->
<!-- Start Row -->
<table class="row" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; position: relative; display: block; padding: 0px;">
<tr style="vertical-align: top; text-align: left; padding: 0;" align="left">
<td class="wrapper last" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; position: relative; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 10px 0px 0px;" align="left" valign="top">
<table class="twelve columns" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 508px; margin: 0 auto; padding: 0;">
<tr style="vertical-align: top; text-align: left; padding: 0;" align="left">
<td class="two sub-columns center" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: center; min-width: 0px; width: 16.666666%; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0px 10px 10px 0px;" align="center" valign="top">
<center style="min-width: 65px; width: 100%;">
<img src="http://images.response.vodafoneglobalenterprise.com/EloquaImages/clients/VodafoneGroupPLC/{e02be391-bab6-4cf4-84a2-9ff6ca979b58}_icn-clock.png" alt="" style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; width: auto; max-width: 100%; float: left; clear: both; display: block;" align="center">
</center>
</td>
<td class="ten sub-columns" valign="middle" style="vertical-align: middle; word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; text-align: left; min-width: 0px; width: 83.333333%; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0px 10px 10px 0px;" align="left">
<h5 elq-edit="true" style="font-size: 22px; color: #222222; font-family: 'Arial Bold', Arial, Helvetica, sans-serif; font-weight: bold; text-align: left; line-height: 1.3; word-break: normal; margin: 0; padding: 0;" align="left">7.00pm - Welcome Party</h5>
</td>
<td class="expander" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; visibility: hidden; width: 0px; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0;" align="left" valign="top"></td>
</tr>
</table>
</td>
</tr>
</table>
<!-- END row -->
<!-- Start Row -->
<table class="row" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; position: relative; display: block; padding: 0px;">
<tr style="vertical-align: top; text-align: left; padding: 0;" align="left">
<td class="wrapper last" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; position: relative; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 10px 0px 0px;" align="left" valign="top">
<table class="twelve columns" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 508px; margin: 0 auto; padding: 0;">
<tr style="vertical-align: top; text-align: left; padding: 0;" align="left">
<td class="two sub-columns center" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: center; min-width: 0px; width: 16.666666%; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0px 10px 10px 0px;" align="center" valign="top">
<center style="min-width: 65px; width: 100%;">
<img src="http://images.response.vodafoneglobalenterprise.com/EloquaImages/clients/VodafoneGroupPLC/{3a92ceeb-920c-48c8-b125-8877d00fcbe6}_icn-location-marker.png" alt="" style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; width: auto; max-width: 100%; float: left; clear: both; display: block;" align="center">
</center>
</td>
<td class="ten sub-columns" valign="middle" style="vertical-align: middle; word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; text-align: left; min-width: 0px; width: 83.333333%; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0px 10px 10px 0px;" align="left">
<h5 elq-edit="true" style="font-size: 22px; color: #222222; font-family: 'Arial Bold', Arial, Helvetica, sans-serif; font-weight: bold; text-align: left; line-height: 1.3; word-break: normal; margin: 0; padding: 0;" align="left">Evian Resort Hotel</h5>
</td>
<td class="expander" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; visibility: hidden; width: 0px; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0;" align="left" valign="top"></td>
</tr>
</table>
</td>
</tr>
</table>
<!-- END row -->
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
<!-- END Invite Information with icons -->关于html - Outlook 07/13 对齐问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32277625/