在 600 像素以下左对齐答案

【问题标题】：left align under 600 px在 600 像素以下左对齐
【发布时间】：2017-02-01 02:23:02
【问题描述】：

我不太清楚为什么我的Test site 上的徽标在屏幕宽度小于 600 像素时左对齐？我没有任何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>

【问题讨论】：

1.请提供minimal reproducible example。 2. 不需要所有粗体字。
我以前发过帖子，当我写我正在为电子邮件编程时，其他人抱怨我必须设置粗体文本。人们对我使用桌子很生气。所以从那时起，我做了别人说我应该做的事情。现在我必须重新做和开始时一样的事情。
你发布代码了吗？

标签： html css zurb-foundation

【解决方案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/

【讨论】：

感谢您的回答。这会影响我代码中的其他内容吗？
好吧，刚刚试过。所以整个网站左对齐:)
是的，它会影响每个 table、tr 和 td 标签。如果您只希望它影响徽标所在的位置，请使用 .row 类。所以 .row td、.row tr，或者只是在表格的开头使用一个 ID 并这样做
在你的场景中使用 #test, #test td, #test tr, #test table, #test tbody { display: block }
我用fiddle更新了，看css的最上面一行

【解决方案2】：

在 Zurb 中，低于 600 意味着媒体查询将您的单元格设置为 align="left"。这意味着 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;} 这样的类，并将其添加到 td 中的类以及 600 以下的媒体查询中。

【讨论】：

非常感谢您的回答。听起来你对 Zurb 有很多了解。我刚试了你说的，可惜图片还是一直跳到左边：vouzalis.com/public-1.html
在第 326 行，复制 table.body 并改为创建此标签：table.body { text-align: center !important; } 将其保留在第 326 行下方，以便最后读取。
这里出了点问题。我做了你写的，但它仍然是一样的。 vouzalis.com/public-1.html 。我再也想不通了
我明白了。我编辑了我的评论。试试看。当我这样做时它正在工作。
再次感谢您。我只是试图用你的代码制作一个 jsfiddle。 jsfiddle.net/rbzcdbvz 。它也不在那里工作:-(