css - Zurb Foundation 4 の画像を中央に配置するためのメディア クエリ

Question

私はばかげたことをしていると確信していますが、それを見つけることができないようです。

このページを取り上げたいと思います: http://jekyll.tx0rx0.com

テキストが下に移動すると、小さな投稿のプレビュー画像が中央に表示されます。このメディアクエリを試しました：

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

このサイトでは、git とファウンデーション 4 レスポンシブ フレームワークを組み合わせた jekyll 投稿生成システムを使用しています。投稿を 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;
    }    
  }
}