图像左对齐600像素以下

Question

此问题已标记为一式两份。另一个问题没有解决我的问题。

此页面顶部的徽标图像：当我进入600px;时，我的网站示例是左对齐的。我正在为电子邮件时事通讯编程，因此我使用带有CSS和表格的基础框架。

我无法在CSS中进行大量自定义，因为电子邮件客户端在呈现一些自定义代码时遇到问题。我早些时候发现Stackoverflow上的一位用户提出了一个想法。我注意到，当我删除css@media中的第二行时，徽标几乎要居中，但没有响应。

当屏幕大小低于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代码，您会看到以下内容，缩减为文本align:

body, table.body, h1, h2, h3, h4, h5, h6, p, td, th, a { text-align: left; }

href上方是th。它也是text-align: left;。如果在每行指定此样式：style="text-align: center !important;"，它将覆盖文本align:left。

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