Question

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

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

@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>

Answer 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，因为它总是会给您带来麻烦，因为每个客户端都会将其解释为有点不同。而是使用span并将样式应用于它。

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

1 个答案: