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

Question

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

我想要这个页面: http://jekyll.tx0rx0.com

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

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

本站使用jekyll后生成系统结合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;
    }    
  }
}