在Outlook 2007、2010等中，电子邮件中的前两个图像未居中对齐，并且也没有保留在我为容器设置的宽度内。这也导致其他内容区域超出设置的宽度。
我遇到的另一个问题是，电子邮件在Outlook 2007、2010等中无法居中对齐。它在左侧对齐。我确定这有点混乱，但是有人可以帮我吗？我仍在学习，并且希望就如何解决所遇到的问题以及学习如何更好地编写代码提供一些建议。
谢谢！
<!DOCTYPE html>
<html>
<head>
<title>Email Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style>
body, table, td, a{-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;}
table, td{mso-table-lspace: 0pt; mso-table-rspace: 0pt;}
img{-ms-interpolation-mode: bicubic;}
img{border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none;}
table{border-collapse: collapse !important; width: 100% !important; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;}
td {border-collapse: collapse !important;}
body{height: 100% !important; margin: 0 !important; padding: 0 !important; width: 100% !important;}
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
@media screen and (max-width: 525px) {
.wrapper {
width: auto !important;
max-width: 100% !important;
}
.browser {
padding: 10px 5% 0px 5% !important;
}
.content {
font-size: 13px !important;
line-height: 21px !important;
padding: 0px !important;
}
.content-td {
padding: 30px 5% 30px 5% !important;
}
.img-max {
max-width: 100% !important;
width: 100% !important;
height: auto !important;
}
.header-img {
max-width: 100% !important;
width: 100% !important;
height: auto !important;
}
.header-td {
max-width: 100% !important;
width: auto !important;
height: auto !important;
padding: 0px !important;
margin: 0px !important;
}
.footer {
padding: 5px 5% 20px 5% !important;
}
.icon {
padding: 0px 0px 0px 10px !important;
}
.icons {
max-width: 90% !important;
width: 90% !important;
height: auto !important;
}
.icon-area {
padding: 0px 5% 30px 5% !important;
}
.img-icon {
max-width: 100% !important;
width: 100% !important;
height: auto !important;
padding: 5px 0px 0px 0px !important;
}
.responsive-table {
width: 100% !important;
}
}
div[style*="margin: 16px 0;"] { Margin: 0 !important; }
</style>
</head>
<body style="margin: 0 !important; padding: 0 !important;" bgcolor="#ffffff">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td align="center" bgcolor="#ffffff">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="max-width: 600px; width: 100%;" align="center">
<tr>
<td align="center" bgcolor="#ffffff">
<table cellpadding="0" cellspacing="0" border="0" width="600" align="center" bgcolor="#ffffff">
<tr>
<td align="center" valign="top" height="15" style="line-height: 0; font-size: 0px; color: #ffffff;" bgcolor="#ffffff" width="600">Preheader</td>
</tr>
<tr>
<td align="center" valign="top" style="font-size: 10px; line-height: 18px; font-family: Helvetica,sans-serif; color: #57595a; text-align: center; padding-bottom: 10px;" width="600" class="padding" bgcolor="#ffffff"> Having problems seeing this message? <a href="#" style="font-family: Helvetica,sans-serif; font-size: 10px; color: #57595a; text-decoration: underline; font-weight: bold;" target="_blank">View in your browser</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" width="600">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="bottom">
<![endif]-->
<div style="display:inline; margin: 0 auto; padding: 0px; vertical-align:bottom;" align="center">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="600" style="max-width: 600px; width: 600px;">
<tr>
<td valign="bottom" class="header-td" style="padding: 0px; margin: 0px;"><a href="#" target="_blank"><img src="" alt="" width="425" height="147" border="0" style="display: inline; font-size: 0px; margin: 0px; float: left;" class="header-img"></a></td><td valign="bottom" class="header-td" style="padding: 0px; margin: 0px;"><a href="#" target="_blank"><img src="" alt="" width="175" height="147" border="0" style="display: inline; font-size: 0px; margin: 0px; float: left" class="header-img"></a></td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<tr>
<td align="center" width="600">
<a href="#" target="_blank">
<img src="" width="600" border="0" style="display: block;" class="img-max" alt=""></a>
</td>
</tr>
<tr>
<td align="center" width="600" style="padding: 40px 40px 40px 40px; width: 600px;" bgcolor="" class="content-td">
<table cellpadding="0" cellspacing="0" border="0" align="center" width="600" style="max-width: 600px; width: 600px;" bgcolor="">
<tr>
<td align="center" style="font-size: 17px; line-height: 22px; font-family: Helvetica, sans-serif; color: #ffffff; text-align: center; width: 600px;" class="content">
Content
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" width="600" valign="top" style="padding: 20px 0px 10px 0px; font-size: 17px; line-height: 20px; font-family: Helvetica,sans-serif; text-align: center; letter-spacing: 0.5px;" bgcolor="#ffffff">
Learn More
</td></tr>
<tr>
<td align="center" width="600" valign="top" style="padding: 10px 20px 40px 20px;" bgcolor="#ffffff" class="icon-area">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table cellpadding="0" cellspacing="0" border="0" align="center" width="100%" style="max-width: 600px;">
<tr>
<td align="center">
<a href="#" target="_blank"><img alt="" class="icons" src="" width="85"/></a>
</td>
<td align="center" class="icon" style="padding: 0px 0px 0px 35px;">
<a href="#" target="_blank"><img alt="" src="" style="display: block;" width="85" class="icons"/></a></td>
<td align="center" class="icon" style="padding: 0px 0px 0px 35px;">
<a href="#" target="_blank"><img alt="" src="" width="85" style="display: block;" class="icons"/></a>
</td>
<td align="center" class="icon" style="padding: 0px 0px 0px 40px;">
<a href="#" target="_blank"><img alt="" src="" width="85" style="display: block;" class="icons"/></a>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td></tr>
<tr>
<td align="center" width="600" valign="top" style="padding: 0px;" bgcolor="#ffffff">
<a href="#" target="_blank"><img alt="Facebook" src="" style="padding-bottom: 5px;" width="30"/></a>
<a href="#" target="_blank"><img alt="Twitter" src="" style="padding-bottom: 5px;" width="30"/></a>
<a href="#" target="_blank"><img alt="YouTube" src="" width="30" style="padding-bottom: 5px;"/></a>
<a href="#" target="_blank"><img alt="Instagram" src="" width="30" style="padding-bottom: 5px;"/></a>
<a href="#" target="_blank"><img alt="LinkedIn" src="" style="padding-bottom: 5px;" width="30"/></a>
</td></tr>
<tr>
<td align="center" width="600" valign="top" style="padding: 0px 0px 20px 0px; font-size: 10px; line-height: 14px; font-family: Helvetica,sans-serif; color: #000000; text-align: center;" bgcolor="#ffffff" class="footer">
© Company
<span style="font-family: Helvetica,sans-serif; font-size: 12px; color: #000000;"> | </span>
Address
<span style="font-family: Helvetica,sans-serif; font-size: 12px; color: #000000;"> | </span>
Location
<br>
<a href="#" target="_blank" style="color: #57595a; text-decoration: underline;">Website</a>
<span style="font-family: Helvetica,sans-serif; font-size: 12px; color: #000000;"> | </span>
<a href="#" target="_blank" style="color: #57595a; text-decoration: underline;">contact us</a>
<span style="font-family: Helvetica,sans-serif; font-size: 12px; color: #000000;"> | </span>
<a href="" target="_blank" style="color: #57595a; text-decoration: underline;">unsubscribe</a>
</td></tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</body>
</html>