web-dev-qa-db-ja.com

グリッド内のzurb Foundation Centerコンテンツ

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

ここに私のコードがあります：

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

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

ありがとう

zurb-foundationcentering
27
Ando

2015年11月編集：Foundation 6でチェックアウト タイポグラフィヘルパー

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

元の答え：

テキスト中心クラスを使用します。

<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

82
NinjaFart

中心クラスを追加してみてください。

.five.columns.centered
4
Nick Treadway

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

3
Flatron

基盤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; }
2
jvalente

Foundation 4を中心に画像を取得できる唯一の方法は、display：blockに変更することです。 display：inline-blockではなくimgの場合。

1
user2250677