【发布时间】：2016-05-11 23:01:53
【问题描述】：
我花了一整天的时间来审查我的问题的修复。我的 HTML 在除 Outlook 之外的所有电子邮件客户端上看起来都很棒，因此布局不会在预览中居中。我已经尝试了<center> 标签并修复了.ExternalClass，但没有任何效果。有人可以帮忙吗？
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<meta content="telephone=no" name="format-detection">
<meta content="width=mobile-width; initial-scale=1.0; maximum-scale=1.0; user- scalable=no" name="viewport">
<meta content="IE=9; IE=8; IE=7; IE=EDGE" http-equiv="X-UA-Compatible">
<link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet" type="text/css">
<title>IAED ACE WEBSITE</title>
<style href="">a {text-decoration: none} </style>
<style type="text/css">
.mobile {
max-width:700px !important;
}
/**This is to overwrite Outlook.com’s Embedded CSS************/
table {
border-collapse:separate;
}
a, a:link, a:visited {
text-decoration: none; color: #2a8acc;
}
a:hover {
text-decoration: underline;
}
h2,h2 a,h2 a:visited,h3,h3 a,h3 a:visited,h4,h5,h6,.t_cht {
color:#000 !important;
}
.ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td {
line-height: 100%;
}
/**This is to center your email in Outlook.com************/
.ExternalClass {
width: 100%;
}
@media only screen and (max-width: 480px) {
.mobile {width: 95% !important; font-size:1.1em; border-collapse: collapse; display:block; margin:0 auto; padding-bottom:15px;}
.hide {display:none;}
.btn_bg { width:50%; margin: 0 auto !important; font-size:1.0em; }
}
@media only screen and (max-width: 320px) {
.mobile {width: 95% !important; font-size:1.1em; border-collapse: collapse; display:block; margin:0 auto; padding-bottom:15px;}
.hide {display:none;}
.btn_bg { width:50%; margin: 0 auto !important; font-size:1.0em;}
}
@media only screen and (max-width: 667px) {
.mobile {width: 95% !important; font-size:1.1em; border-collaps: collapse; display:block; margin:0 auto; padding-bottom:15px;}
.hide {display:none;}
.btn_bg { width:50%; margin: 0 auto !important; font-size:1.0em;}
}
@media only screen and (max-width: 730px) {
.mobile {width: 95% !important; font-size:1.1em; border-collapse: collapse; display:block; margin:0 auto; padding-bottom:15px;}
.hide {display:none;}
.btn_bg { width:50%; margin: 0 auto !important; font-size:1.0em; }
}
</style>
</head>
<body bgcolor="#EFEFEF" style="margin: 0; padding: 0;">
<!-- SPACE-->
<table bgcolor="#EFEFEF" border="0" cellpadding="0" cellspacing="0" style=
"height:15px; background-color:#efefef; width:100%;" width="100%">
<tr>
<td>
</td>
</tr>
</table>
<!--end of space-->
<!-- HIDDEN PREHEADER -->
<div style=
"display: none; font-size: 1px; color:#333333; line-height: 1px; font-family: 'Lato', sans-serif; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden; mso-hide: all;">
IAED ACE WEBSITE
</div>
<!--BEGIN OUTTER CONTAINTER-->
<table bgcolor="#EFEFEF" border="0" cellpadding="0" cellspacing="0" style=
"background-color:#efefef;" width="100%">
<tr>
<td>
<!--BEGIN NAV-->
<table align="center" bgcolor="#FFFFFF" border="0" cellpadding=
"0" cellspacing="0" style=
"background-color:#ffffff; width:700; margin:0 auto; border:thin solid #E8E8E8; color:#2a8acc;"
width="700">
<tr>
<td colspan="5" style="line-height:15px; height:15px;">
</td>
</tr>
<tr>
<td width="2%"> </td>
<td width="35%">
<a href="http://www.emergencydispatch.org/" style=
"color:#2a8acc; text-decoration:underline;" target=
"_blank"><img src=
"https://www.emergencydispatch.org/vrc/iaed/2016/email/images/iaed-logo-200w.png"></a>
</td>
<td align="left" valign="bottom" width="23%">
<span style=
"font-family: 'Lato', sans-serif; color:#2a8acc; text-align:left; font-size:18px;">
<a href="http://www.emergencydispatch.org/" style=
"color:#2a8acc; text-decoration:underline;" target=
"_blank">ABOUT IAED</a></span>
</td>
<td valign="bottom" width="20%"><span style=
"font-family: 'Lato', sans-serif; color:#2a8acc; text-align:left; font-size:18px;">
<a href="https://accreditation.emergencydispatch.org/"
style="color:#2a8acc; text-decoration:underline;"
target="_blank">WHY ACE</a></span>
</td>
<td valign="bottom" width="30%">
<!-- SOCIAL MEDIA -->
<table>
<tr>
<td width="30px">
<a href=
"https://www.facebook.com/InternationalAcademiesofEmergencyDispatch"
style=
"border:none; text-decoration:none;"
target="_blank"><img src=
"https://www.emergencydispatch.org/vrc/iaed/2016/email/images/facebook-logo-round.png"></a>
</td>
<td width="30px">
<a href="https://twitter.com/TheIAED"
style=
"border:none; text-decoration:none;"
target="_blank"><img src=
"https://www.emergencydispatch.org/vrc/iaed/2016/email/images/Twitter-round-color.png"></a>
</td>
<td width="30px">
<a href=
"https://www.linkedin.com/company/international-academies-of-emergency-dispatch"
style=
"border:none; text-decoration:none;"
target="_blank"><img src=
"https://www.emergencydispatch.org/vrc/iaed/2016/email/images/linkedin-round.png"></a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="5" style="line-height:15px; height:15px;">
</td>
</tr>
</table>
<!--END NAV-->
<!--BEGIN BANNER -->
<table align="center" border="0" cellpadding="0" cellspacing=
"0" style="background-color:#ffffff; width:700; margin:0 auto;"
width="700px">
<tr>
<td>
<a href=
"https://accreditation.emergencydispatch.org/"
style="border:none;" target="_blank"><img class=
"mobile" src=
"https://www.emergencydispatch.org/vrc/iaed/2016/email/images/banner-iaed.png"></a>
</td>
</tr>
</table>
<!--END BANNER -->
<!-- BEGIN CONTENT -->
<table bgcolor="#FFFFFF" border="0" cellpadding="0"
cellspacing="0" style=
"background-color:#ffffff; width:700; margin:0 auto; border-bottom:thin solid #E8E8E8;"
width="700px">
<tr>
<td colspan="2" style="line-height:15px; height:15px;">
</td>
</tr>
<tr>
<td align="center" colspan="3"><span style=
"font-family: 'Lato', sans-serif; color:#2e2e2e; text-align:left; font-size:24px; font-weight:800;">
FEATURES</span>
</td>
</tr>
<tr>
<td colspan="3" style=
"line-height:15px; height:15px; border-bottom:thin solid #E8E8E8;">
</td>
</tr>
<tr>
<td colspan="3" style="line-height:15px; height:15px;">
</td>
</tr>
<tr>
<td align="center" width="25%"><img src=
"https://www.emergencydispatch.org/vrc/iaed/2016/email/images/user-friendly.png">
</td>
<td width="70%">
<span style=
"font-family: 'Lato', sans-serif; color:#2e2e2e; text-align:left; font-size:18px; font-weight:500;">
User-friendly</span>
<ul style=
"font-family: 'Lato', sans-serif; color:#2e2e2e; text-align:left; font-size:14px;">
<li>Simple-to-use instructions for providing
information and uploading documents help you
complete the 20 Points requirements</li>
<li>Demo videos help guide you through various
facets of the application process</li>
</ul>
</td>
<td width="3%">
</td>
</tr>
<tr>
<td colspan="3" style="line-height:15px; height:15px;">
</td>
</tr>
<tr>
<td align="center" width="25%"><img src=
"https://www.emergencydispatch.org/vrc/iaed/2016/email/images/cloud-icon.png">
</td>
<td width="70%">
<span style=
"font-family: 'Lato', sans-serif; color:#2e2e2e; text-align:left; font-size:18px; font-weight:500;">
Upload everything—no more binders!</span>
<ul style=
"font-family: 'Lato', sans-serif; color:#2e2e2e; text-align:left; font-size:14px;">
<li>Our easy and convenient upload process means
you can electronically upload required application
documents to the IAED’s secure servers 24/7</li>
<li>No more shipping heavy binders</li>
</ul>
</td>
<td width="3%">
</td>
</tr>
<tr>
<td colspan="3" style="line-height:15px; height:15px;">
</td>
</tr>
<tr>
<td align="center" width="25%"><img src=
"https://www.emergencydispatch.org/vrc/iaed/2016/email/images/progress-icon.png">
</td>
<td width="70%">
<span style=
"font-family: 'Lato', sans-serif; color:#2e2e2e; text-align:left; font-size:18px; font-weight:500;">
Progress bars</span>
<ul style=
"font-family: 'Lato', sans-serif; color:#2e2e2e; text-align:left; font-size:14px;">
<li>You can track your ACE application progress for
each of the 20 Points achieving also your overall
progress and deadlines toward ACE</li>
<li>Uploading documents is made easy with a
progress bar that lets you know when your
upload is complete</li>
</ul>
</td>
<td width="3%">
</td>
</tr>
<tr>
<td colspan="3" style="line-height:15px; height:15px;">
</td>
</tr>
<tr>
<td align="center" width="25%"><img src=
"https://www.emergencydispatch.org/vrc/iaed/2016/email/images/sync-icon.png">
</td>
<td width="70%">
<span style=
"font-family: 'Lato', sans-serif; color:#2e2e2e; text-align:left; font-size:18px; font-weight:500;">
Sync your information</span>
<ul style=
"font-family: 'Lato', sans-serif; color:#2e2e2e; text-align:left; font-size:14px;">
<li>The online ACE application system automatically
synchronizes 20 Points application tasks completed
during your communication center’s implementation
process</li>
</ul>
</td>
<td width="3%">
</td>
</tr>
<tr>
<td colspan="3" style="line-height:15px; height:15px;">
</td>
</tr>
<tr>
<td align="center" width="25%"><img src=
"https://www.emergencydispatch.org/vrc/iaed/2016/email/images/credit-icon.png">
</td>
<td width="70%">
<span style=
"font-family: 'Lato', sans-serif; color:#2e2e2e; text-align:left; font-size:18px; font-weight:500;">
Re-accreditation ready</span>
<ul style=
"font-family: 'Lato', sans-serif; color:#2e2e2e; text-align:left; font-size:14px;">
<li>You can refer to online documents previously
submitted by your agency for ACE or Re-ACE
requirements</li>
<li>Re-accreditation is a snap with the online
ACE application process</li>
</ul>
</td>
</tr>
<tr>
<td colspan="3" style="line-height:15px; height:15px;">
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- END OF OUTTER CONTAINTER -->
</body></html>
【问题讨论】：
标签： html email responsive-design outlook center