2017-01-31 2 views
-1

Я не совсем уверен, почему мой логотип на моем Test site выравнивается влево, когда я перехожу под 600 пикселей в ширину экрана? У меня нет float left, и я тоже сосредоточил картинку с text-align: center.left align under 600 px

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

Кто-нибудь может понять, почему мой логотип левый, выровненный ниже 600 пикселей?

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> 
+0

1. Просьба [mcve]. 2. Нет необходимости во всем этом жирном тексте. –

+0

Я публиковал раньше, когда другие люди жалуются на то, что мне пришлось выделить жирный текст, когда я писал, что я программировал электронные письма. Люди рассердились, что я использовал столы. Поэтому с того времени я сделал то, что другие люди сказали, что я должен делать. Теперь я должен сделать то же самое, что и в начале. – McDuck4

+0

Вы отправляли код? –

ответ

1

Ваш стол, тр и тд метки имеют дисплей: стол-рядный, они должны быть включены в дисплей: блок. Если они вам нужны только для медиа-запросов, тогда вставьте их туда.

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

Обновлено с jsfiddle:

https://jsfiddle.net/cj09ecy2/

+0

Благодарим вас за ответ. Это может повлиять на другие вещи в моем коде? – McDuck4

+0

Ах, хорошо, просто попробовал это. Таким образом, весь веб-сайт вышел влево: – McDuck4

+0

Да, он будет влиять на каждый стол, тр и тд. Если вы только хотите, чтобы это повлияло на то, где логотип, используйте класс .row. Так что .row td, .row tr или просто используйте идентификатор в начале таблицы и делайте это так – Keith

1

В Zurb ниже 600 означает, что запрос СМИ устанавливает вашу ячейку следует выровнять = "влево". Это означает, что либо href, td, tr, либо таблица помещают 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;} и добавить, что в классе в тд, а также медиа-запрос для под 600.

+0

Большое спасибо за ответ. Похоже, у вас много знаний с Zurb. Я просто попробовал, что вы сказали, но извините, что изображение все еще продолжает прыгать влево: http://vouzalis.com/public-1.html – McDuck4

+0

на строке 326, скопируйте table.body и создайте вместо этого этот тег: 'table .body { text-align: center! important; } ' Оставьте его где-то ниже строки 326, чтобы он читался последним. – gwally

+0

Здесь что-то не так. Я сделал то, что вы написали, но это все равно. http://vouzalis.com/public-1.html.Я не могу понять это больше – McDuck4