移动样式的 HTML 电子邮件中心不适用于 div

Question

我正在开发一个响应式电子邮件模板，但无法让一些 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]>&nbsp;<![endif]-->Read the Article <!--[if mso]>&nbsp;<![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 上被忽略了。

Answer 1

尝试使用中心标签。这将使标签所包含的内容居中。有关示例，请访问 Center Tags Example .