我有一封响应式电子邮件（电子邮件css内联），我有2列，第二列中的文字没有与图标对齐。建议？
这似乎只发生在Outlook 07＆amp; 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 -->
答案 0 :(得分：0)
我正在使用Zurb的Ink框架。我能够利用几个mod来利用子列/子网格特征。
<!-- 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 -->