zurb-foundation - グリッド内のzurbFoundationCenterコンテンツ

Question

画像を水平方向にzurb列の中央に配置しようとしていますが、不可能のようです。私はすべてを試し、どこでも検索しましたが、うまくいきません。

これが私のコードです：

<div class="row">
    <div class="twelve columns"><br />
        <img src="img_06.jpeg" alt="slide image">
    </div>
</div>

現在、横向きの画像は12列のグリッドで問題ありませんが、縦向きの画像が表示されると、グリッドの左側に表示されます。25％のパディングを与えると中央に移動しますが、phpを使用してフォルダーからすべての画像をプルし、その場でコードを生成しているため、すべての画像に25％のパディングを設定することはできません（風景のものは縮小します）。

ありがとう

Answer 1

2015年11月の編集： Foundation 6で、タイポグラフィヘルパーをチェックしてください

---

2014年4月の編集： Foundation 5で、ユーティリティクラスを確認してください。

---

元の答え：

text-centerクラスを使用します。

<div class="row">
    <div class="twelve columns text-center"><br />
        <img src="img_06.jpeg" alt="slide image">
    </div>
</div>

ソース：https ：//github.com/zurb/foundation/pull/224

Answer 2

中央揃えのクラスを追加してみてください。

.five.columns.centered

Answer 3

クラス「text-center」を追加するだけです

Answer 4

ファンデーション4の使用：

HTML：

<div class="row">
    <div id="wrap-img" class="large-12 columns"><br />
        <img src="img_06.jpeg" alt="slide image">
    </div>
</div>

CSS：

#wrap-img img { margin: 0 auto; }

Answer 5

Foundation 4の中央に画像を表示する唯一の方法は、display：blockに変更することです。display：inline-blockの代わりにimgの場合;