☰

Bootstrap: 列内のコンテンツを中央揃えにするには? [重複] 質問する

tag-icon • tag-icon html css twitter-bootstrap
Bootstrap: 列内のコンテンツを中央揃えにするには? [重複] 質問する

簡単な使用例のシナリオは、Bootstrap 列内で画像やその他のコンテンツを使用することです。多くの場合、このコンテンツは水平方向に中央揃えする必要があります。

<div class="container">
    <div class="row">
        <div class="col-sm-4 col-md-4 col-lg-4 text-center">
            <img class="img-responsive" src="img/some-image.png" title="this image needs to be centered">
        </div>
        <div class="col-sm-8 col-md-8 col-lg-8">
            some content not important at this moment
        </div>
    </div>
</div>

バージョン 3.1.0 では、text-center クラスを追加すると、列内の画像が中央に配置されました。しかし、他の問題を修正するためにバージョン 3.3.4 に移行せざるを得なくなり、この動作 (text-center) が壊れてしまいました。列内の画像やその他のコンテンツを中央に配置する方法という問題が残っています。含まれる要素にクラスを追加するのはエラーが発生しやすく、別の div が必要になるため、避けたいです。

ベストアンサー1

画像を中央に配置したいですか? とても簡単です。Bootstrap には 2 つのクラスが付属しています.center-block。text-center

画像が要素である場合は前者を使用しますBLOCK。たとえば、img-responsive画像にクラスを追加すると、ブロックimg要素imgになります。Web コンソールで移動して要素に適用されたスタイルを確認する方法を知っている場合は、これを知っておく必要があります。

クラスを使いたくないですか? 問題ありません。こちらがブートストラップが使用する CSS です。カスタム クラスを作成したり、要素がブートストラップ クラスと一致するように CSS ルールを記述したりできます。

 // In case you're dealing with a block element apply this to the element itself 
.center-block {
   margin-left:auto;
   margin-right:auto;
   display:block;
}

// In case you're dealing with a inline element apply this to the parent 
.text-center {
   text-align:center
}

おすすめ記事