我在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>
答案 0 :(得分:0)
您发送的电子邮件很可能会有更多的错误和问题,您正在起诉<div>
,该电子邮件不受支持或存在某些问题。 Outlook 2007-2016不完全支持保证金,您可以check it here进行故障诊断。
使用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>