將媒體查詢對齊中心（EMAIL CODE）

這是電子郵件代碼，因此使用表格而不是使用列表。將媒體查詢對齊中心（EMAIL CODE）

如果我將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>

來源

2016-07-20 aleejelly

如果我明白你的問題正確這裏的修復：

在

您HTML更改行：

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

到

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

所以你設置寬度後applys指定類atributes。這使得你的桌子在一個更小的屏幕上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，因爲它總是給人帶來麻煩，因爲每個客戶都認爲它有點不同。而是使用跨度並對其應用樣式。

來源

2016-07-21 08:36:40 Niqql

將媒體查詢對齊中心（EMAIL CODE）

回答

相關問題