电子邮件中的表未在MS Outlook中居中

Question

我在HTML电子邮件中使用以下标记来居中表格。它在大多数电子邮件客户端中运行良好，但由于某种原因，在 Outlook 中，表格显示为左对齐，即使我在左右使用了边距自动。我做错了什么吗？

<table class="email-survey-type type_question" style=" width: 80%; text-align: center;  margin: 0 auto 20px auto;;" bgcolor="#fff" border="0" cellpadding="0" cellspacing="0">

<div style="font-family: 'Helvetica Nueue', Arial, sans-serif; padding: 20px; background: #fff;">
<div style="font-family:'Helvetica Nueue', Arial, sans-serif; background: #fff; max-width: 550px; margin: 0 auto;">


<style type="text/css">
@media only screen and (min-width: 430px) { .maxW { width:400px !important; } }
</style>


<div class="maxW" style="max-width:400px;margin: 0 auto;">

</div><table width="100%" bgcolor="#fff" border="0" cellpadding="0" cellspacing="0">
<tbody><tr style="text-align: center;">
<!--[if (gte mso 9)|(IE)]><table width="400" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->
</tr></tbody></table>

<table class="email-survey-type type_question" style=" width: 95%; text-align: center; margin: 0 auto; " bgcolor="#fe5777" border="0" cellpadding="0" cellspacing="0">
<tbody><tr>


<td>
<a href="#">
<img alt="0" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Apple_logo_black.svg/340px-Apple_logo_black.svg.png" width="60" style="max-width: 60px; width:60px; color: #c0392b; font-weight: bold; font-size: 16px; line-height: 50px; text-align: center;">
</a>
</td>





<td>
<a href="#">
<img alt="2" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Apple_logo_black.svg/340px-Apple_logo_black.svg.png" width="60" style="max-width: 60px; width:60px; color: #e74c3c; font-weight: bold; font-size: 16px; line-height: 50px; text-align: center;">
</a>
</td>





<td>
<a href="#">
<img alt="4" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Apple_logo_black.svg/340px-Apple_logo_black.svg.png" width="60" style="max-width: 60px; width:60px; color: #f65c4c; font-weight: bold; font-size: 16px; line-height: 50px; text-align: center;">
</a>
</td>





<td>
<a href="#">
<img alt="6" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Apple_logo_black.svg/340px-Apple_logo_black.svg.png" width="60" style="max-width: 60px; width:60px; color: #e76430; font-weight: bold; font-size: 16px; line-height: 50px; text-align: center;">
</a>
</td>





<td>
<a href="#">
<img alt="8" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Apple_logo_black.svg/340px-Apple_logo_black.svg.png" width="60" style="max-width: 60px; width:60px; color: #2ecc71; font-weight: bold; font-size: 16px; line-height: 50px; text-align: center;">
</a>
</td>





<td>
<a href="#">
<img alt="10" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Apple_logo_black.svg/340px-Apple_logo_black.svg.png" width="60" style="max-width: 60px; width:60px; color: #1abc9c; font-weight: bold; font-size: 16px; line-height: 50px; text-align: center;">
</a>
</td>


</tr>
</tbody></table>
<table class="email-survey-type type_question" style=" width: 80%; text-align: center;  margin: 0 auto 20px auto;;" bgcolor="#fff" border="0" cellpadding="0" cellspacing="0">
<tbody><tr>




<td>
<a href="#">
<img alt="1" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Apple_logo_black.svg/340px-Apple_logo_black.svg.png" width="60" style="max-width: 60px; width:60px; color: #c0392b; font-weight: bold; font-size: 16px; line-height: 50px; text-align: center;">
</a>
</td>





<td>
<a href="#">
<img alt="3" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Apple_logo_black.svg/340px-Apple_logo_black.svg.png" width="60" style="max-width: 60px; width:60px; color: #e74c3c; font-weight: bold; font-size: 16px; line-height: 50px; text-align: center;" >
</a>
</td>





<td>
<a href="#">
<img alt="5" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Apple_logo_black.svg/340px-Apple_logo_black.svg.png" width="60" style="max-width: 60px; width:60px; color: #e76430; font-weight: bold; font-size: 16px; line-height: 50px; text-align: center;" >
</a>
</td>





<td>
<a href="#">
<img alt="7" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Apple_logo_black.svg/340px-Apple_logo_black.svg.png" width="60" style="max-width: 60px; width:60px; color: #2ecc71; font-weight: bold; font-size: 16px; line-height: 50px; text-align: center;" >
</a>
</td>





<td>
<a href="#">
<img alt="9" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Apple_logo_black.svg/340px-Apple_logo_black.svg.png" width="60" style="max-width: 60px; width:60px; color: #1abc9c; font-weight: bold; font-size: 16px; line-height: 50px; text-align: center;">
</a>
</td>




</tr>
</tbody></table>
</div>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->




<table width="100%" bgcolor="#fff" border="0" cellpadding="0" cellspacing="0">
<tbody><tr style=" ">
<td style="padding: 20px;"><p style="text-align: center; margin: 0 0 5px; line-height: 1;font-family:'Helvetica Nueue', Arial, sans-serif;font-size:18px;" class="bottom_text_en-target show-parent-2">Lorem ipsum dolor</p></td>
</tr>
</tbody></table>


<!-- End links -->
</div>

Answer 1

您的电子邮件很可能会有更多的错误和问题，您正在起诉不支持或存在一些问题的<div>。Outlook 2007-2016 不完全支持保证金，您可以在此处查看它有问题。

使用align="center"

法典：

<table align="center" class="email-survey-type type_question" style=" width: 80%; text-align: center;" bgcolor="red" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
Your code
</td>
</tr>
</table>