Bootstrap の .center-block クラスを使用して画像をページの中央に完全に配置する方法

Bootstrap を使用して画像をページの中央に完全に配置する

Twitter Bootstrap を使用する場合、画像を水平方向に中央に配置するのは必ずしも簡単ではない場合があります。この記事では、ブートストラップ クラス .center-block を使用して、画像をページの中央に簡単に配置するソリューションを紹介します。

.center-block クラスについて

.center-block クラスTwitter Bootstrap v3.0.3 は、ブロック要素をページの中央に配置するために特別に設計されています。表示プロパティを block に設定し、マージン (margin-left と margin-right) を auto に調整して、要素が水平方向と垂直方向の両方で中央に配置されるようにします。

.center-block

.center-block を使用して画像を中央に配置するには、行内の img タグにクラスを追加するだけです。例:

<code class="html"><div class="container">
  <div class="row">
    <div class="span4"></div>
    <div class="span4"><img class="center-block" src="logo.png" /></div>
    <div class="span4"></div>
  </div>
</div></code>

.center-block クラス スタイル シートは次を定義します:

<code class="css">.center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
 }</code>

例

ライブ デモンストレーションについては、次の場所にアクセスできます。サンプル ページ:

[サンプル ページ](URL)

.center-block クラスを利用すると、画像の中心をページに簡単に合わせることができ、視覚的に美しくバランスのとれたレイアウトを確保できます。 .

以上がBootstrap の .center-block クラスを使用して画像をページの中央に完全に配置する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。