我尝试了很多不同的方法来使主要的白色内容区域在 Outlook 中居中。它适用于所有其他平台。我敢肯定，从我尝试过的所有事情中，我现在过度使用了中心标签。
大家有什么建议吗？
<!doctype html>
<html>
<head><meta name="viewport" content="width=device-width" /><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Email</title>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet" />
<style type="text/css">/* -------------------------------------
GLOBAL RESETS
------------------------------------- */
/*All the styling goes here*/
img {
border: none;
-ms-interpolation-mode: bicubic;
max-width: 100%;
}
body {
background-color: #f6f6f6;
font-family: sans-serif;
-webkit-font-smoothing: antialiased;
font-size: 14px;
line-height: 1.4;
Margin: 0;
padding: 0;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
color: #424242;
}
table {
border-collapse: separate;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
width: 100%; }
table td {
font-family: sans-serif;
font-size: 13px;
vertical-align: top;
}
/* -------------------------------------
BODY & CONTAINER
------------------------------------- */
.body {
background-color: #f6f6f6;
width: 100%;
align: center;
align-content: center;
}
/* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */
.container {
display: block;
Margin: 0 auto !important;
/* makes it centered */
max-width: 580px;
padding: 10px;
width: 580px;
align: center;
}
/* This should also be a block element, so that it will fill 100% of the .container */
.content {
box-sizing: border-box;
display: block;
Margin: 0 auto;
max-width: 580px;
padding: 10px;
}
/* -------------------------------------
HEADER, FOOTER, MAIN
------------------------------------- */
.main {
background: #ffffff;
border-radius: 3px;
width: 100%;
}
.wrapper {
box-sizing: border-box;
padding: 20px;
}
.content-block {
padding-bottom: 10px;
padding-top: 10px;
}
.footer {
clear: both;
margin-top: 10px;
text-align: center;
width: 100%;
}
.footer td,
.footer p,
.footer span,
.footer a {
color: #999999;
font-size: 13px;
text-align: center;
}
/* -------------------------------------
TYPOGRAPHY
------------------------------------- */
h1,
h2,
h3,
h4 {
color: #000000;
font-family: sans-serif;
font-weight: 400;
line-height: 1.4;
margin: 0;
margin-bottom: 30px;
}
h1 {
font-size: 35px;
font-weight: 300;
text-align: center;
text-transform: capitalize;
}
p,
ul,
ol {
font-family: sans-serif;
font-size: 13px;
font-weight: normal;
margin: 0;
margin-bottom: 15px;
}
p li,
ul li,
ol li {
list-style-position: inside;
margin-left: 5px;
}
a {
color: #3498db;
text-decoration: none;
}
/* -------------------------------------
BUTTONS
------------------------------------- */
.btn {
box-sizing: border-box;
width: 100%; }
.btn > tbody > tr > td {
padding-bottom: 15px; }
.btn table {
width: auto;
}
.btn table td {
background-color: #ffffff;
border-radius: 5px;
text-align: center;
}
.btn a {
background-color: #ffffff;
border: solid 1px #3498db;
border-radius: 5px;
box-sizing: border-box;
color: #3498db;
cursor: pointer;
display: inline-block;
font-size: 13px;
font-weight: bold;
margin: 0;
padding: 13px 25px;
text-decoration: none;
text-transform: capitalize;
}
.btn-primary table td {
background-color: #3498db;
}
.btn-primary a {
background-color: #3498db;
border-color: #3498db;
color: #ffffff;
}
/* -------------------------------------
OTHER STYLES THAT MIGHT BE USEFUL
------------------------------------- */
.last {
margin-bottom: 0;
}
.first {
margin-top: 0;
}
.align-center {
text-align: center;
}
.align-right {
text-align: right;
}
.align-left {
text-align: left;
}
.clear {
clear: both;
}
.mt0 {
margin-top: 0;
}
.mb0 {
margin-bottom: 0;
}
.preheader {
color: transparent;
display: none;
height: 0;
max-height: 0;
max-width: 0;
opacity: 0;
overflow: hidden;
mso-hide: all;
visibility: hidden;
width: 0;
}
.powered-by a {
text-decoration: none;
}
hr {
border: 0;
border-bottom: 1px solid #f6f6f6;
margin: 20px 0;
}
/* -------------------------------------
RESPONSIVE AND MOBILE FRIENDLY STYLES
------------------------------------- */
@media only screen and (max-width: 620px) {
table[class=body] h1 {
font-size: 28px !important;
margin-bottom: 10px !important;
}
table[class=body] p,
table[class=body] ul,
table[class=body] ol,
table[class=body] td,
table[class=body] span,
table[class=body] a {
/* font-size: 16px !important; */
}
table[class=body] .wrapper,
table[class=body] .article {
padding: 10px !important;
}
table[class=body] .content {
padding: 0 !important;
}
table[class=body] .container {
padding: 0 !important;
width: 100% !important;
}
table[class=body] .main {
border-left-width: 0 !important;
border-radius: 0 !important;
border-right-width: 0 !important;
}
table[class=body] .btn table {
width: 100% !important;
}
table[class=body] .btn a {
width: 100% !important;
}
table[class=body] .img-responsive {
height: auto !important;
max-width: 100% !important;
width: auto !important;
}
}
/* -------------------------------------
PRESERVE THESE STYLES IN THE HEAD
------------------------------------- */
@media all {
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
.apple-link a {
color: inherit !important;
font-family: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
text-decoration: none !important;
}
#MessageViewBody a {
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
.btn-primary table td:hover {
background-color: #34495e !important;
}
.btn-primary a:hover {
background-color: #34495e !important;
border-color: #34495e !important;
}
}
</style>
</head>
<body data-gr-ext-installed="" data-new-gr-c-s-check-loaded="14.1008.0" style="align-content: center;">
<p><span class="preheader">AchieveCE's Weekly LiveCE Schedule</span></p>
<table border="0" cellpadding="0" cellspacing="0" class="body" role="presentation" align="center" style="align-content: center;">
<tbody>
<tr>
<td> </td>
<td class="container" align="center" style="align-content: center;">
<center>
<div class="content" align="center" style="align-content: center;"><!-- START CENTERED WHITE CONTAINER -->
<table class="main" role="presentation" align="center" style="align-content: center;"><!-- START MAIN CONTENT AREA -->
<tbody>
<tr>
<td class="wrapper" style="align-content: center;" align="center">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="align-content: center;" align="center">
<tbody>
<tr>
<td>
<p><a border="0" href="http://www.achievece.com/?utm_medium=email&utm_campaign=logo" style="text-decoration: none;" target="_blank"><img alt="AchieveCE" border="0" height="50" src="https://achievece.com/wp-content/uploads/2020/04/footer-logo.png" width="200" /></a></p>
</td>
</tr>
<tr>
<td>
<p><a border="0" href="http://www.achievece.com/pharmacy-ce/?utm_medium=email&utm_campaign=logo" style="text-decoration: none;" target="_blank"><img alt="AchieveCE" border="0" src="https://achievece.com/wp-content/uploads/2021/05/Live-Webinar-Weekly-Line-Up-Template-scaled.jpg" width="580"/></a></p>
</td>
</tr>
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="580" style="padding-bottom: 20px;">
<tbody>
<tr>
<td align="center" style="color: #276BAD; font-family: 'Roboto', sans-serif; font-weight: 600; padding-right: 10px; font-size:15px" width="100%"><img src="https://achievece.com/wp-content/uploads/2020/08/LOGO.png" width="30" /> Live CE Lineup<br /><font style="color:#424242; padding-top: 10px; font-size: 12px; font-family: 'Roboto', sans-serif; font-weight: 600;"> Week of June 7, 2021 - June 11, 2021</font></td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td style="line-height: 5px;" width="100%"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<table width="100%" align="center" cellspacing="0" cellpadding="1" style="margin-top: 10px;">
<tr>
<td width="78%" style="vertical-align: middle;">
<table width="100%" align="center" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
<tr>
<td width="10%" align="center" style="background-color: #006BAB; color: #ffffff; padding: 6px; border: 1px solid #dddddd; font-family: 'Roboto', sans-serif;"><strong>Mon</strong><br />7</td>
</tr>
<tr>
<td align="center" style="border:padding: 3px;"></td>
<td colspan="3" width="90%" style="padding-left: 5px;padding: 3px; padding-left: 8px; padding-top:30px; padding-bottom:20px; font-family: 'Roboto', sans-serif; border: 1px solid #dddddd; margin-bottom: 0px; margin-top: 0px; padding-top: 10px; padding-bottom: 0px; border: 0px; border-style: none;">
<font style= "color:#636363; font-size:13px"><strong>June 7, 2021 10:00a - 11:00a ET</strong></font><br />
<font style="color: #267cad; font-size: 14px;"><strong>Insomnia Drugs and the Pitfalls </strong></font><br />
Dr. Tim Brown<br />
<font style="color: #636363;"><strong>Credits:</strong></font> 1.0 Contact Hours<br />
</td>
</tr>
<tr>
<td align="center" style="border:padding: 3px;"></td>
<td colspan="2" width="100%" style="padding-left: 5px;padding: 3px; padding-left: 8px; padding-top:0px; padding-bottom:20px; font-family: 'Roboto', sans-serif; border: 1px solid #dddddd; margin-bottom: 0px; margin-top: 0px; padding-top: 0px; padding-bottom: 0px; border: 0px; border-style: none;">
<font style="color: #636363;"><strong>Audience:</strong></font> Pharmacists<br />
<font style="color: #636363;"><strong>Cost:</strong></font> <font style="color: #636363;">$25.00 (Free for members)</font><br />
</td>
<td width="10%"style="padding-right: 20px; padding-left: 20px; padding-top:60px;border: 1px solid #dddddd; margin-bottom: 0px; margin-top: 0px; padding-top: 10px; padding-bottom: 0px; border: 0px; border-style: none; margin-left: 0; margin-right: 0;">
<div><!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://achievece.com/course/insomnia-drugs-and-the-pitfalls-060721/?utm_campaign=livecelineup&utm_medium=email&utm_source=livecelineup" style="height:50px;v-text-anchor:middle;width:170;" arcsize="5%" strokecolor="#276CAD" fillcolor="#276CAD">
<w:anchorlock/>
<center style="color:#ffffff;font-family:'Roboto',Helvetica, Arial,sans-serif;font-size:12px;"><strong>MORE INFO</strong></center>
</v:roundrect>
<![endif]--><a href="https://achievece.com/course/insomnia-drugs-and-the-pitfalls-060721/?utm_campaign=livecelineup&utm_medium=email&utm_source=livecelineup" style="background-color:#ffc093;border:1px solid #ffc093;border-radius:3px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:12px;line-height:30px;text-align:center;text-decoration:none;width:100px;-webkit-text-size-adjust:none;mso-hide:all;padding-left:10px;padding-right:10px; font-family: 'Roboto', sans-serif;" target="_blank"><strong>MORE INFO</strong></a></div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td style="line-height: 15px;" width="100%"> </td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td><a href="https://achievece.com/ce-on-the-go/?utm_campaign=livecelineup&utm_medium=email&utm_source=livecelineup" style="text-decoration: none;" target="_blank"><img src="https://achievece.com/wp-content/uploads/2021/05/ce-on-the-go-scaled.jpg" width="580" /></a></td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td style="line-height: 15px;" width="100%"> </td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" role="presentation">
<tbody>
<tr>
<td align="center" style="width:10%" ><a href="https://achievece.com/pharmacy-webinar/?utm_campaign=livecelineup&utm_medium=email&utm_source=livecelineup" style="text-decoration: none;" target="_blank"><font style="font-family: 'Roboto'; font-size: 12px; font-weight: 600;">Live Calendar</font></a></td>
<td align="center" style="width:10%"><a href="https://achievece.com/home-study-webcasts/?utm_campaign=livecelineup&utm_medium=email&utm_source=livecelineup" style="text-decoration: none;" target="_blank"><font style="font-family: 'Roboto'; font-size: 12px; font-weight: 600;">Webcasts</font></a></td>
<td align="center" style="width:10%"><a href="https://achievece.com/home-study-monographs/?utm_campaign=livecelineup&utm_medium=email&utm_source=livecelineup" style="text-decoration: none;" target="_blank"><font style="font-family: 'Roboto'; font-size: 12px; font-weight: 600;">Monographs</font></a></td>
<td align="center" style="width:10%"><a href="https://achievece.com/ce-on-the-go/?utm_campaign=livecelineup&utm_medium=email&utm_source=livecelineup" style="text-decoration: none;" target="_blank"><font style="font-family: 'Roboto'; font-size: 12px; font-weight: 600;">CE On-The-Go</font></a></td>
<td align="center" style="width:10%"><a href="https://achievece.com/pharmacy-membership/?utm_campaign=livecelineup&utm_medium=email&utm_source=livecelineup" style="text-decoration: none;" target="_blank"><font style="font-family: 'Roboto'; font-size: 12px; font-weight: 600;">Membership</font></a></td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td style="line-height: 15px;" width="100%"> </td>
</tr>
</tbody>
</table>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- END MAIN CONTENT AREA -->
</tbody>
</table>
</div>
<!-- END CENTERED WHITE CONTAINER --><!-- START FOOTER -->
<div class="footer">
<table border="0" cellpadding="0" cellspacing="0" role="presentation">
<tbody>
<tr>
<td class="content-block">
<a border="0" href="http://www.facebook.com/achieveceonline" style="text-decoration: none;" target="_blank"><img alt="Facebook" border="0" height="30" src="https://achievece.com/wp-content/uploads/2020/07/fbIcon.png" width="30" /></a> <a border="0" href="http://www.twitter.com/achievece" style="text-decoration: none;" target="_blank"><img alt="Twitter" border="0" height="30" src="https://achievece.com/wp-content/uploads/2020/07/twIcon.png" width="30" /></a> <a border="0" href="http://www.linkedin.com/company/achievece" style="text-decoration: none;" target="_blank"><img alt="LinkedIn" border="0" height="30" src="https://achievece.com/wp-content/uploads/2020/07/liIcon.png" width="30" /></a> <a border="0" href="https://www.instagram.com/achieveceonline/" style="text-decoration: none;" target="_blank"><img alt="Instagram" border="0" height="30" src="https://achievece.com/wp-content/uploads/2021/02/12.png" width="30" /></a>
</td>
</tr>
<tr>
<td class="content-block"><span class="apple-link" style="font-size: 12px;">Ensure delivery of email communications. Add <a href="mailto:info@achievece.com">info@achievece.com</a> to your address book or safe list.<br />
<br />
<em>Copyright © 2021 AchieveCE, All rights reserved.</em><br />
<br />
<strong>MAILING ADDRESS</strong><br />
AchieveCE <font style="color: gainsboro;">|</font> 4320 Deerwood Lake Pkwy #101-332 <font style="color: gainsboro;">|</font> Jacksonville, FL 32216<br />
<br />
This email was sent to <a href="#">[Email]</a> because of an action taken at AchieveCE.com.<br />
Don't like these emails? <a href="[unsubscribe]">Unsubscribe</a>.</span></td>
</tr>
</tbody>
</table>
</div>
<!-- END FOOTER -->
</center>
</td>
</tr>
</table>
</body>
</html>