600 像素以下左对齐

Question

我不太清楚为什么当我的屏幕宽度低于 600 像素时，我 Test site 上的徽标会左对齐？我没有任何 float left，我也用 text-align: center 居中了图片。

我正在构建一个电子邮件通讯模板。因此我使用基础 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>

Answer 1

你的table、tr、td标签有display:table-row，需要转成display:块。如果你只需要它们用于媒体查询，那么把它放在那里。

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

已使用 jsfiddle 更新：

https://jsfiddle.net/cj09ecy2/

Answer 2

在 Zurb 中，低于 600 意味着媒体查询正在将您的单元格设置为对齐="left"。这意味着 href、td、tr 或 table 在您的 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>

您还可以添加一个 class，例如 .center-align {text-align: center !important;}，并将其添加到 td 中的 class 以及 600 岁以下的媒体查询中。

600 像素以下左对齐

left align under 600 px

html

css

zurb-foundation