css - Zurb Foundation 4 的媒体查询居中图像

Question

我确定我在做一些愚蠢的事情，但我似乎找不到它。

我想使用这个页面：http: //jekyll.tx0rx0.com

当文本移动到它们下方时，让小预览图像居中。我试过这个媒体查询：

@media (max-width: emCalc(600px))
{
    .smallcenter{
        display: block;
        text-align: center;
        float: center;
    }
}

该站点使用 jekyll 帖子生成系统与 git 和基础 4 响应框架相结合，我希望它将帖子集中在 ipad 纵向大小和向下的任何内容上，但它似乎不起作用。谢谢你。

score 2 · Accepted Answer

由于您的图像由 a 标签包裹，您可以告诉 a 的父级将文本居中对齐。

我会将smallcenter类移动到最外面的 div（.large-4 那个），如下所示：

HTML

<div class="large-4 columns smallcenter">
  <a href="/postsurl"><img src="/assets/image.png" alt=" WHY NO WORK!"></a> 
</div>

SASS

@media (max-width: emCalc(600px)){
  .smallcenter {
    text-align: center;
    & > a {
      display: inline-block;
    }    
  }
}

1 回答 1