HTML 移动风格的电子邮件中心不适用于 div
HTML email center on mobile styles not working on div
我正在制作响应式电子邮件模板，但无法让一些 div 以移动设备为中心。
我在 CSS 中包含媒体查询以使内容在移动设备上居中，但在第二个 div 中它们被忽略了。不确定我在代码中的正确位置是否有媒体查询样式。包含媒体查询和 div 代码以供参考。
/*Responsive screens*/
@media screen and (max-width: 500px) {
.stack-column, .stack-column-center { display: block !important;width: 100% !important;max-width: 100% !important;direction: ltr !important; padding-left:0px !important; padding-right:0px !important; padding-bottom:0px !important } /*Forces table cells into full-width rows*/
.stack-column-center { text-align: center !important; padding-left:0px !important; padding-right:0px !important; } /* And center justify these ones. */
.center-on-narrow { text-align: center !important;display: block !important;margin-left: auto !important;margin-right: auto !important;float: none !important; } /*Generic utility class for centering. Useful for images, buttons, and nested tables*/
table.center-on-narrow { display: inline-block !important; }
.email-container p { font-size: 17px !important; } /*Adjusts typography on small screens to improve readability*/
.middle-article-mobile-pt { padding-top: 60px !important; }
.middle-article-mobile-pb { padding-bottom: 60px !important; }
}
<tr>
<td dir="ltr" height="100%" style="padding: 30px 50px; background-color: #ffffff;" valign="top" width="100%"><!--[if mso]>
<table align="center" role="presentation" border="0" cellspacing="0" cellpadding="0" width="500" style="width: 500;">
<tr>
<td valign="top" width="500" style="width: 500;">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="max-width:500px; padding:0; margin:0;" width="100%">
<tbody>
<tr style="padding:0;margin:0;">
<td align="center" style="font-size:0; padding: 0;" valign="top" class=""><!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="500" style="width: 500;">
<tr>
<td valign="top" width="200" style="width: 200px;">
<![endif]-->
<div class="stack-column" style="display:inline-block; margin: 0; max-width: 200px; vertical-align:top; width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td dir="ltr" style="padding: 0 10px 0 10px;" class=""><img alt="alt_text" border="0" class="center-on-narrow" height="" src="http://go.pardot.com/l/190862/2019-04-09/h9rldk/190862/77786/template_testing_200px_placeholder.png" style="width: 100%; max-width: 200px; height: auto; background: #dddddd; font-family: sans-serif; font-size: 15px; line-height: 15px; color: #555555;" width="200"></td>
</tr>
</tbody>
</table>
</div>
<!--[if mso]>
</td>
<td valign="top" width="300" style="width: 300px;">
<![endif]-->
<div class="stack-column" style="display:inline-block; margin: 0; max-width:300px; vertical-align:top;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td class="center-on-narrow" dir="ltr" style="font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555; padding: 0 0 0 20px; text-align: left;">
<p class="body-h1" style="margin:0;">Headline</p>
<p class="body-h2" style="margin:0;"><a href="##" style="text-decoration:underline;">Author, CPA<br>
Title title title title</a></p>
<p class="body-copy" style="margin: 15px 0;">Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
<!-- Button : BEGIN -->
<table align="left" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="left" bgcolor="#05090c7" pardot-data="" style="border-radius: 2px; background: rgb(255,255,255);" class=""><a class="light-blue-button" href="##"><!--[if mso]> <![endif]-->Read the Article <!--[if mso]> <![endif]--></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- Button : END --></td>
</tr>
</tbody>
</table>
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]--></td>
</tr>
</tbody>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]--></td>
</tr>
期望 .center-on-narrow 和 .stack-column CSS 样式将 div 内容集中在 narrow 上，但它在第二个 div 上被忽略了。
尝试使用中心标签。这将使标签所包含的内容居中。例如访问 Center Tags Example.
我想通了！添加了更多移动样式并调整了 CTA 按钮周围的代码。
/*Responsive screens*/
@media screen and (max-width: 500px) {
.stack-column, .stack-column-center { display: block !important;width: 100% !important;max-width: 100% !important;direction: ltr !important; padding-left:0px !important; padding-right:0px !important; padding-bottom:0px !important }
.stack-column-center { text-align: center !important; padding-left:0px !important; padding-right:0px !important; }
.center-on-narrow { text-align: center !important;display: block !important;margin-left: auto !important;margin-right: auto !important;float: none !important; }
table.center-on-narrow { display: inline-block !important; }
.email-container p { font-size: 17px !important; }
.middle-article-mobile-pt { padding-top: 60px !important; }
.middle-article-mobile-pb { padding-bottom: 60px !important; }
.text-right-mobile { padding: 0px !important; }
.body-copy, .body-copy-2, .body-h1, .body-h2, .light-blue-button, .orange-button, .mobile-center { text-align:center !important; }
}
<tr>
<td dir="ltr" height="100%" style="padding: 30px 50px; background-color: #ffffff;" valign="top" width="100%" ><!--[if mso]>
<table align="center" role="presentation" border="0" cellspacing="0" cellpadding="0" width="500" style="width: 500;">
<tr>
<td valign="top" width="500" style="width: 500;">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="max-width:500px; padding:0; margin:0;" width="100%">
<tbody>
<tr style="padding:0;margin:0;">
<td align="center" style="font-size:0; padding: 0 0 60px 0;border-bottom:1px solid #ebebeb;" valign="top" class=""><!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="500" style="width: 500;">
<tr>
<td valign="top" width="200" style="width: 200px;">
<![endif]-->
<div class="stack-column" style="display:inline-block; margin: 0; max-width: 200px; vertical-align:top; width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td dir="ltr" style="padding: 0 10px 0 10px;" class=""><img alt="alt_text" border="0" class="center-on-narrow" height="" src="http://go.pardot.com/l/190862/2019-04-09/h9rldk/190862/77786/template_testing_200px_placeholder.png" style="width: 100%; max-width: 200px; height: auto; background: #dddddd; font-family: sans-serif; font-size: 15px; line-height: 15px; color: #555555;" width="200"></td>
</tr>
</tbody>
</table>
</div>
<!--[if mso]>
</td>
<td valign="top" width="300" style="width: 300px;">
<![endif]-->
<div class="stack-column" style="display:inline-block; margin: 0; max-width:300px; vertical-align:top;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td class="center-on-narrow text-right-mobile" dir="ltr" style="font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555; padding: 0 0 0 20px; text-align: left;">
<p class="body-h1" style="margin:0;">Headline</p>
<p class="body-h2" style="margin:0;"><a href="##" style="text-decoration:underline;">Author, CPA<br>
Title title title title</a></p>
<p class="body-copy" style="margin: 15px 0;">Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
<!-- Button : BEGIN -->
<table border="0" cellpadding="0" cellspacing="0" >
<tbody>
<tr>
<td>
<table align="left" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td bgcolor="#05090c7" pardot-data="" style="border-radius: 2px; background: rgb(255,255,255);" class=""><a class="light-blue-button" href="##"><!--[if mso]> <![endif]-->Read the Article <!--[if mso]> <![endif]--></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- Button : END --></td>
</tr>
</tbody>
</table>
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]--></td>
</tr>
</tbody>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]--></td>
</tr>
我正在制作响应式电子邮件模板，但无法让一些 div 以移动设备为中心。
我在 CSS 中包含媒体查询以使内容在移动设备上居中，但在第二个 div 中它们被忽略了。不确定我在代码中的正确位置是否有媒体查询样式。包含媒体查询和 div 代码以供参考。
/*Responsive screens*/
@media screen and (max-width: 500px) {
.stack-column, .stack-column-center { display: block !important;width: 100% !important;max-width: 100% !important;direction: ltr !important; padding-left:0px !important; padding-right:0px !important; padding-bottom:0px !important } /*Forces table cells into full-width rows*/
.stack-column-center { text-align: center !important; padding-left:0px !important; padding-right:0px !important; } /* And center justify these ones. */
.center-on-narrow { text-align: center !important;display: block !important;margin-left: auto !important;margin-right: auto !important;float: none !important; } /*Generic utility class for centering. Useful for images, buttons, and nested tables*/
table.center-on-narrow { display: inline-block !important; }
.email-container p { font-size: 17px !important; } /*Adjusts typography on small screens to improve readability*/
.middle-article-mobile-pt { padding-top: 60px !important; }
.middle-article-mobile-pb { padding-bottom: 60px !important; }
}
<tr>
<td dir="ltr" height="100%" style="padding: 30px 50px; background-color: #ffffff;" valign="top" width="100%"><!--[if mso]>
<table align="center" role="presentation" border="0" cellspacing="0" cellpadding="0" width="500" style="width: 500;">
<tr>
<td valign="top" width="500" style="width: 500;">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="max-width:500px; padding:0; margin:0;" width="100%">
<tbody>
<tr style="padding:0;margin:0;">
<td align="center" style="font-size:0; padding: 0;" valign="top" class=""><!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="500" style="width: 500;">
<tr>
<td valign="top" width="200" style="width: 200px;">
<![endif]-->
<div class="stack-column" style="display:inline-block; margin: 0; max-width: 200px; vertical-align:top; width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td dir="ltr" style="padding: 0 10px 0 10px;" class=""><img alt="alt_text" border="0" class="center-on-narrow" height="" src="http://go.pardot.com/l/190862/2019-04-09/h9rldk/190862/77786/template_testing_200px_placeholder.png" style="width: 100%; max-width: 200px; height: auto; background: #dddddd; font-family: sans-serif; font-size: 15px; line-height: 15px; color: #555555;" width="200"></td>
</tr>
</tbody>
</table>
</div>
<!--[if mso]>
</td>
<td valign="top" width="300" style="width: 300px;">
<![endif]-->
<div class="stack-column" style="display:inline-block; margin: 0; max-width:300px; vertical-align:top;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td class="center-on-narrow" dir="ltr" style="font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555; padding: 0 0 0 20px; text-align: left;">
<p class="body-h1" style="margin:0;">Headline</p>
<p class="body-h2" style="margin:0;"><a href="##" style="text-decoration:underline;">Author, CPA<br>
Title title title title</a></p>
<p class="body-copy" style="margin: 15px 0;">Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
<!-- Button : BEGIN -->
<table align="left" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="left" bgcolor="#05090c7" pardot-data="" style="border-radius: 2px; background: rgb(255,255,255);" class=""><a class="light-blue-button" href="##"><!--[if mso]> <![endif]-->Read the Article <!--[if mso]> <![endif]--></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- Button : END --></td>
</tr>
</tbody>
</table>
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]--></td>
</tr>
</tbody>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]--></td>
</tr>
期望 .center-on-narrow 和 .stack-column CSS 样式将 div 内容集中在 narrow 上，但它在第二个 div 上被忽略了。
尝试使用中心标签。这将使标签所包含的内容居中。例如访问 Center Tags Example.
我想通了！添加了更多移动样式并调整了 CTA 按钮周围的代码。
/*Responsive screens*/
@media screen and (max-width: 500px) {
.stack-column, .stack-column-center { display: block !important;width: 100% !important;max-width: 100% !important;direction: ltr !important; padding-left:0px !important; padding-right:0px !important; padding-bottom:0px !important }
.stack-column-center { text-align: center !important; padding-left:0px !important; padding-right:0px !important; }
.center-on-narrow { text-align: center !important;display: block !important;margin-left: auto !important;margin-right: auto !important;float: none !important; }
table.center-on-narrow { display: inline-block !important; }
.email-container p { font-size: 17px !important; }
.middle-article-mobile-pt { padding-top: 60px !important; }
.middle-article-mobile-pb { padding-bottom: 60px !important; }
.text-right-mobile { padding: 0px !important; }
.body-copy, .body-copy-2, .body-h1, .body-h2, .light-blue-button, .orange-button, .mobile-center { text-align:center !important; }
}
<tr>
<td dir="ltr" height="100%" style="padding: 30px 50px; background-color: #ffffff;" valign="top" width="100%" ><!--[if mso]>
<table align="center" role="presentation" border="0" cellspacing="0" cellpadding="0" width="500" style="width: 500;">
<tr>
<td valign="top" width="500" style="width: 500;">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="max-width:500px; padding:0; margin:0;" width="100%">
<tbody>
<tr style="padding:0;margin:0;">
<td align="center" style="font-size:0; padding: 0 0 60px 0;border-bottom:1px solid #ebebeb;" valign="top" class=""><!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="500" style="width: 500;">
<tr>
<td valign="top" width="200" style="width: 200px;">
<![endif]-->
<div class="stack-column" style="display:inline-block; margin: 0; max-width: 200px; vertical-align:top; width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td dir="ltr" style="padding: 0 10px 0 10px;" class=""><img alt="alt_text" border="0" class="center-on-narrow" height="" src="http://go.pardot.com/l/190862/2019-04-09/h9rldk/190862/77786/template_testing_200px_placeholder.png" style="width: 100%; max-width: 200px; height: auto; background: #dddddd; font-family: sans-serif; font-size: 15px; line-height: 15px; color: #555555;" width="200"></td>
</tr>
</tbody>
</table>
</div>
<!--[if mso]>
</td>
<td valign="top" width="300" style="width: 300px;">
<![endif]-->
<div class="stack-column" style="display:inline-block; margin: 0; max-width:300px; vertical-align:top;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td class="center-on-narrow text-right-mobile" dir="ltr" style="font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555; padding: 0 0 0 20px; text-align: left;">
<p class="body-h1" style="margin:0;">Headline</p>
<p class="body-h2" style="margin:0;"><a href="##" style="text-decoration:underline;">Author, CPA<br>
Title title title title</a></p>
<p class="body-copy" style="margin: 15px 0;">Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
<!-- Button : BEGIN -->
<table border="0" cellpadding="0" cellspacing="0" >
<tbody>
<tr>
<td>
<table align="left" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td bgcolor="#05090c7" pardot-data="" style="border-radius: 2px; background: rgb(255,255,255);" class=""><a class="light-blue-button" href="##"><!--[if mso]> <![endif]-->Read the Article <!--[if mso]> <![endif]--></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- Button : END --></td>
</tr>
</tbody>
</table>
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]--></td>
</tr>
</tbody>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]--></td>
</tr>