左对齐 600 像素以下 [英] left align under 600 px

问题描述

我不太确定为什么我的 测试站点 上的徽标在我进入时左对齐屏幕宽度为 600 像素?我没有任何 float left 并且我也用 text-align: center 将图片居中.

I am not quite sure why my logo on my Test site is left aligning when I go under 600px in screen width? I do not have any float left and I centered the picture with text-align: center also.

我正在构建电子邮件通讯模板.因此我使用基础 css 框架，也就是表格.

有人能明白为什么我的徽标左对齐低于 600 像素吗?

Can anybody see why my logo is left align below 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>

推荐答案

你的 table、tr 和 td 标签有 display: table-row，它们需要变成 display: block.如果您只在媒体查询中需要它们，请将其放在那里.

Your table, tr, and td tags have display: table-row, they need to be turned into display: block. If you need them only for media queries, then stick this in there.

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

使用 jsfiddle 更新:

Updated with a jsfiddle:

https://jsfiddle.net/cj09ecy2/

这篇关于左对齐 600 像素以下的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！