将中心与媒体查询对齐（电子邮件代码）答案

【问题标题】：Align center with media queries (EMAIL CODE)将中心与媒体查询对齐（电子邮件代码）
【发布时间】：2016-07-21 16:36:40
【问题描述】：

这是电子邮件代码，因此使用表格而不是列表。

如果我将 promo_1-3 的宽度更改为固定数字（比如 300 像素），我可以让它们左右对齐（就像桌面大小的原始代码一样），但我不能让它们忽略最初指定的左对齐或右对齐并居中

@media only screen and ( max-width: 660px) {
        table.container { width: 100% !important; }
        td.logo img { width:100% !important; }
        td.headerimg img{ width: 100% !important; padding: 5px 30px 40px 30px;}
        td.promos table.promo_1 { width: 100% !important; }
        td.promos table.promo_1 td { padding: 20px 20px 40px 30px; }
        td.promos table.promo_2 { width: 100% !important; }
        td.promos table.promo_2 td { padding: 20px 0px 40px 30px; }
        td.promos table.promo_3 { width: 100% !important; border-top: 1px solid #CAC5C5; }
        td.promos table.promo_3 td { padding: 20px 0px 40px 30px; }

这是 HTML：

<!-- Start story 1 -->     
        <tr>
            <td valign="top" bgcolor="#fff" class="promos" style="padding: 10px 10px 20px 20px; background-color: #fff; font-family: Arial, Helvetica, sans-serif;">
                <table class="promo_3" width="300" align="left">
                    <tr>
                        <td>
                             <a target="_blank" href="http://trailrunnermag.com/training/training-plans/1860-what-your-weekly-training-plan-should-look-like"> 
                             <img class="promo" alt="Promo image 1" src=    "http://media.campaigner.com/media/47/474810/063016ID3.jpg"></a>
                                <h3 style="font-size:16px;">Promo heading here</h3>

                                <br><br>
                                    <a href="#" style="background-color: #7711AA; border-radius: 5px; color: #fff; padding:5px 10px 5px 10px; text-decoration: none; text-shadow: 0px 2px 2px #3a5606;">Learn more</a>
                                </td>
                            </tr>
                 </table>

【问题讨论】：

标签： email html-email

【解决方案1】：

如果我正确理解你的问题，这里就是解决方法：

在您的 HTML 中更改行：

<table class="promo_3" width="300" align="left">

到

<table width="300" class="promo_3" align="left">

所以它会在您设置宽度后应用指定的类属性。这使您的表格在较小的屏幕上达到 100% 宽。然后像这样更改您的 css 行：

td.promos table.promo_3 { width: 100% !important; border-top: 1px solid #CAC5C5; }

到

td.promos table.promo_3 { width: 100% !important; text-align: center; border-top: 1px solid #CAC5C5; }

将表格中的内容与中心对齐。

另外，如果您将其用于电子邮件，我建议您不要使用 H3，因为它总是会带来麻烦，因为每个客户对它的解释都略有不同。而是使用跨度并对其应用样式。

【讨论】：