Выравнивающий центр со средствами массовой информации (EMAIL CODE)

Question

Это код электронной почты, поэтому вместо использования списков используются таблицы.

Если я изменяю ширину 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> 

Answer 1

Если я правильно понимаю ваш вопрос здесь исправление:

в вашем HTML измените строку:

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

в

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

поэтому в своей работе применяет 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, потому что он всегда создает проблемы, поскольку каждый клиент интерпретирует его как бит бит. Вместо этого используйте диапазон и применяйте к нему стили.