ブートストラップで画像を中央に配置する方法

ブートストラップを使用してコンテンツをレイアウトする場合、画像をコンテンツの中央に水平に表示する必要がある場合があります。

通常、私たちの画像は .img-sensitive クラスを使用して画像の応答性を実装します。 (推奨学習: Bootstrap ビデオ チュートリアル )

レスポンシブ画像の水平方向の中央揃えを実現する必要がある場合は、 の代わりに .center-block クラスを使用する必要があります。 text- center

.center-block クラスを使用して、レスポンシブ画像の水平方向の中央揃えを実現します。使用説明:

<p><img class="img-responsive center-block" src="..." /></p>

注: # の配置##.center-block クラスの場所。 タグ内に配置する必要があり、外側の層に配置すると中央揃えができません。

たとえば、次のコードでは画像を中央に配置できません。

<div class="center-block"><img class="img-responsive" src="..." /></div>

画像に応答クラス .img-sensitive が追加されていない場合は、

.text-center を使用して画像の中央揃えを実現することもできます :

<p class="text-center"><img src="..."></p>

Bootstrap に関連する技術的な記事については、

Bootstrap チュートリアル 列にアクセスして学習してください。

以上がブートストラップで画像を中央に配置する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。