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

Question

我确定我在做一些傻事，但我似乎找不到它。

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

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

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

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

Answer 1

由于您的图像由 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;
    }    
  }
}