Zentrieren mit Medienabfragen (EMAIL CODE)

Question

Dies ist E-Mail-Code, daher Tabellen anstelle von Listen zu verwenden.

Wenn ich die Breite von Promo_1-3 auf eine feste Zahl (etwa 300px) ändere, kann ich sie links und rechts ausrichten (wie der Originalcode auf der Desktop-Größe), aber ich kann sie nicht bekommen ignorieren die ursprünglich linke oder rechte Ausrichtung festgelegt und

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

hier ist der HTML-zentriert:

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

Wenn ich hier richtig verstehe Ihre Frage ist fix: in

Ihre HTML ändern Sie die Zeile:

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

zu

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

, damit es die Klasse angegeben atributes applys, nachdem Sie die Breite festgelegt. Dies macht Sie Tisch dann 100% breit auf einem kleineren Bildschirm. Dann CSS Zeile wie folgt ändern:

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

zu

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

den Inhalt in der Tabelle auf die Mitte auszurichten.

Auch wenn Sie dies für eine E-Mail verwenden, würde ich Ihnen empfehlen, die H3 nicht zu verwenden, weil es immer Ärger gibt, da jeder Client es ein wenig anders interpretiert. Verwenden Sie stattdessen einen Bereich und wenden Sie Stile darauf an.