左揃え600px未満

Question

私のTest siteのロゴが画面の幅が600px以下になると整列したままになっている理由はよく分かりません。私はfloat leftを持っておらず、私はtext-align: centerと一緒に写真を中心にしていました。

メールニュースレターテンプレートを作成しています。したがって、私はfoundation cssフレームワークを使用します。これはテーブルを意味します。

私のロゴが600px未満のままになっている理由は誰にも見えますか？

HTML

<!-- Logo --> 
      <table class="row background-color__white"> 
      <tr> 
       <td class="center" align="center"> 
       <center> 
        <table class="container"> 
        <tr> 
         <td class="wrapper last"> 
         <table class="twelve columns"> 
          <tr> 
          <td style="text-align: center;"> 
           <a href="http://google.dk"> 
           <img width="250" height="80" src="https://s24.postimg.org/y6ho747xx/Untitled_1.png" alt="Alt text here"> 
           </a> 
          </td> 
          </tr> 
         </table> 
         </td> 
        </tr> 
        </table> 
       </center> 
       </td> 
      </tr> 
      </table> 

Answer 1

あなたのテーブル、TR、およびTDタグを表示してい：ブロック：テーブル行を、彼らはディスプレイになってする必要があります。あなたがメディアのクエリのためにそれらを必要とする場合は、そこにこれをスティックします。 jsfiddleで更新

#test, #test table, #test td, #test tr, #test tbody { 
    display: block; 
} 

：Zurbで

https://jsfiddle.net/cj09ecy2/

Answer 2

、600の下のメディアクエリーは、あなたのセルが= "左" 揃えされるように設定されていることを意味します。つまり、href、td、trまたはtableは、テーブルセルにalign = "left"を設定します。

tdの上の各親に同じ中央スタイルを配置することで、ロゴを中央に揃えることができます。

<table align="center" cellspacing="0" cellpadding="0" border="0" width="100%" class="twelve columns" style="text-align: center;"> 
    <tr style="text-align: center;"> 
    <td style="text-align: center;"> 
     <a href="http://google.dk"> 
     <img width="250" height="80" src="https://s24.postimg.org/y6ho747xx/Untitled_1.png" alt="Alt text here"> 
    </td> 
    </tr> 
</table> 

また.center-align {text-align: center !important;}のようにクラスを追加し、[MCVE]を提供してください