html - 图片在 600 像素以下左对齐

Question

此问题已被标记为重复问题。另一个问题没有解决我的问题。

本页顶部的标志图片:My Site Example当我进入 600px; 时，它是左对齐的。我正在为电子邮件通讯编程，因此我使用带有 CSS 和表格的基础框架。

我无法在 CSS 中自定义很多内容，因为电子邮件客户端在呈现某些自定义代码时出现问题。我之前发现 Stackoverflow 上的一位用户提出了一个想法。我注意到当我删除 css @media 中的第二行时， Logo 几乎居中，但没有响应。

foundation framework当屏幕尺寸小于 600px 时，显然左对齐所有内容。但我在文档中找不到任何内容说明如何否决它。

有没有人有创意，不需要很多自定义代码，所以我不会搞砸基础框架？

CSS

@media only screen and (max-width: 600px) {

  table[class="body"] img {
    width: auto !important;
    height: auto !important;
  }
  <!-- Second Line -->
  table[class="body"] center {
    min-width: 0 !important;
  }

HTML(相关代码)

<!-- Logo -->
          <table class="row background-color__white" id="component-center">
            <tr>
              <td class="center" align="center">
                <center>
                  <table align="center" class="container">
                    <tbody>
                      <tr>
                        <td>
                          <table class="row">
                            <tbody>
                              <tr>
                                <th class="small-12 large-12 columns first last">
                                  <table>
                                    <tr>
                                      <th>
                                        <center data-parsed="">
                                          <img src="http://placehold.it/200?text=center" alt="image of clever meme that made me chuckle" align="center" class="float-center">
                                        </center>
                                      </th>
                                      <th class="expander"></th>
                                    </tr>
                                  </table>
                                </th>
                              </tr>
                            </tbody>
                          </table>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </center>
              </td>
            </tr>
          </table>

Answer 1

我的回答和上次一模一样。除了现在您的问题的答案已移至 public.html:837。父元素可以影响其下方的元素。

在这种情况下，您有一个 href 包装图像。如果您在第 837 行查看您的 css 代码，您会看到这个，缩减为文本对齐:

body, table.body, h1, h2, h3, h4, h5, h6, p, td, th, a { 文本对齐:左； }

在 href 之上是一个 th。它也是 text-align: left; 如果你在每一行指定这个样式:style="text-align: center !important;"，它会覆盖文本对齐:左对齐。

我是一名电子邮件开发人员，我每天都在 Zurb Foundation 处理电子邮件。我理解这个问题并不断面对它，只是我在努力把事情推向正确的方向。请试一试。