1. ホーム
  2. css

[解決済み】bootstrapで画像を中央に配置する方法

2022-04-08 20:23:33

質問

ブートストラップ・フレームワークを使用していて、画像を水平方向に中央配置しようとしましたが、うまくいきません。

12グリッドシステムを3つのブロックに分割する等、様々なテクニックを試してみました。

<div class="container">
    <div class="row">
      <div class="span4"></div>
      <div class="span4"><img src="logo.png" /></div>
      <div class="span4"></div>
    </div>
</div>

画像をページに対して相対的に中央に配置する最も簡単な方法は何ですか?

どのように解決するのですか?

Twitter Bootstrap v3.0.3のクラスは、center-blockです。

センターコンテンツブロック

要素を表示:ブロック、マージンによる中央寄せに設定します。ミキシンおよびクラスとして利用可能。

ただ、クラスを追加する必要があります .center-block の中に img タグは、次のようになります。

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

Bootstrapでは、すでに.center-blockというCSSスタイルがあります。

.center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
 }

からサンプルを見ることができます。 ここで