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

我正在开发一个响应电子邮件模板，无法让一些div以手机为中心，因为他们应该这样做

我在CSS中包含了媒体查询，以将内容集中在手机上，但在第二个div中它们被忽略。不确定我是否在代码中的正确位置具有媒体查询样式。包含媒体查询和div代码以供参考

/*响应屏幕*/
@媒体屏幕和屏幕（最大宽度：500px）{
.stack column、.stack column中心{显示：块！重要；宽度：100%！重要；最大宽度：100%！重要；方向：ltr！重要；左侧填充：0px！重要；右侧填充：0px！重要；底部填充：0px！重要}/*强制表格单元格进入全宽行*/
.stack列中心{text align:center！important；padding left:0px！important；padding right:0px！important；}/*并将这些列中心对齐*/
.center on show{text align:center！important；display:block！important；margin left:auto！important；margin right:auto！important；float:none！important；}/*用于居中的通用实用程序类。适用于图像、按钮和嵌套表*/
table.center-on-窄带{显示：内联块！重要；}
.email容器p{font size:17px！重要；}/*调整小屏幕上的排版以提高可读性*/
.middle article mobile pt{padding top:60px！重要；}
.middle article mobile pb{填充底部：60px！重要；}
}

标题


梅塞纳斯·塞德·佩伦茨克、波苏尔·利奥·艾德、埃利芬德·多洛。根据康努比亚·诺斯特拉（conubia nostra）和希梅纳奥斯（inceptos himenaeos）的规定，社会责任和责任等级为：

尝试使用中心标记。这将使标记所包含的内容居中。例如访问。

我发现了这一点！添加了更多的移动风格，并围绕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; }
        }

标题


梅塞纳斯·塞德·佩伦茨克、波苏尔·利奥·艾德、埃利芬德·多洛。根据康努比亚·诺斯特拉（conubia nostra）和希梅纳奥斯（inceptos himenaeos）的规定，社会责任和责任等级为：

我只希望div在移动视图上居中，但在桌面或平板电脑上左对齐。有没有一种方法可以将中心标记用作媒体查询的一部分？我测试了你的代码，效果很好。它以手机为中心。

        <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]>&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>