Question

这个问题已被标记为d d。另一个问题没有解决我的问题。

此页面顶部的徽标图片：My Site Example向左对齐，当我进入600px;时。我正在为电子邮件简报编程，因此我使用CSS和表格的基础框架。

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

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

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

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代码，你会看到这个，缩小到text-align：

text-align: left;

在href之上是th。它也是style="text-align: center !important;"如果您在每一行指定此样式：function InitiliazeGoogleSearch() { var input = document.getElementsByClassName('js-autocomplete'); for (i = 0; i < input.length; i++) { autocomplete = new google.maps.places.Autocomplete(input[i]); } google.maps.event.addListener(autocomplete, 'place_changed', function () { if(!$('.js-main-filter_wrapper').css('display','block')) { $('.js-main-filter_wrapper').slideToggle(); } }); }，它将覆盖text-align：left。

我是电子邮件开发人员，我每天都会与Zurb Foundation联系，收发电子邮件。我理解这个问题并不断面对它，只是我试图把事情推向正确的位置。请试一试。

图像对齐低于600像素

1 个答案: