Question

我不太清楚为什么当我在屏幕宽度低于600px时，我的Test site上的徽标会保持对齐？我没有任何float left，我也将图片集中在text-align: center。

我正在制作电子邮件简报模板。因此，我使用基础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

你的table，tr和td标签有display：table-row，需要将它们变成display：block。如果您只需要媒体查询，那么请将其粘贴在那里。

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

更新了jsfiddle：

https://jsfiddle.net/cj09ecy2/

Answer 2

在Zurb中，低于600意味着媒体查询正在将您的单元格设置为对齐=＆＃34;左＆＃34;。这意味着要么href，td，tr或table放置一个align =＆＃34; left＆＃34;在你的桌子上。

您可以通过将相同的中心样式放在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;}的类，并将其添加到td中的类以及600以下的媒体查询中。

左对齐低于600像素

2 个答案: