.center-block を使用してブートストラップで画像を完全に中央に配置する方法

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

Bootstrap フレームワークを使用する場合、画像を水平方向に中央に配置するのは少し難しい場合があります。ただし、組み込みクラス .center-block.

CSS クラス: .center-block

.center-block クラスを使用する簡単な解決策があります。 Twitter Bootstrap v3.0.3 で導入され、マージンを使用してコンテンツ ブロックを水平方向に中央揃えにします。ミックスインまたはクラスとして使用できます。

使用法

.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>

CSS

.center-block クラスには次の CSS プロパティがあります:

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

これらのプロパティは、表示する画像を設定します。ブロック要素を作成し、両側に均等な余白を適用してページの中央に配置します。

例

.center- を使用して画像を中央に配置したライブ例を表示できます。ブロック: [サンプル URL はこちら]

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