Bootstrapでブロックを中央揃えするには？

Bootstrapは、WebサイトやWebアプリケーションを簡単に作成するための、人気のあるHTML、CSS、JavaScriptのフレームワークです。レスポンシブデザインに対応しており、グリッドシステム、ボタン、フォームなど、様々なコンポーネントが用意されています。

その中でも、要素の配置はWebデザインにおいて非常に重要です。Bootstrapでは、要素を簡単に中央揃えするためのクラスが用意されています。

ブロック要素の中央揃え

Bootstrapでは、ブロック要素を中央揃えするためにclass="center-block"を使用します。このクラスは、要素をインラインブロックとして扱い、左右のマージンを自動的に設定することで中央揃えを実現します。

使用方法

center-blockクラスを使用するには、中央揃えしたい要素にクラスを追加します。


  <div class="container">
    <div class="row">
      <div class="col-md-6 center-block">
        <p>このブロックは中央揃えされています。</p>
      </div>
    </div>
  </div>

このコードでは、col-md-6クラスで要素の幅を指定し、center-blockクラスで中央揃えを行っています。

使用例

center-blockクラスを使用した中央揃えの例をいくつか紹介します。

例	コード
画像の中央揃え	`<img src="image.jpg" alt="画像" class="center-block">`
ボタンの中央揃え	`<button type="button" class="btn btn-primary center-block">ボタン</button>`

注意点

center-blockクラスは、Bootstrap 3まで有効です。Bootstrap 4以降では、mx-autoクラスを使用します。
center-blockクラスは、親要素の幅が固定されている場合にのみ有効です。親要素の幅が可変の場合、中央揃えは機能しません。

参考資料

Bootstrap 3 Helper classes

よくある質問

Q1: `center-block`クラスを使っても中央揃えされない場合は？

A1: 親要素の幅が固定されているか確認してください。親要素の幅が可変の場合は、中央揃えは機能しません。

Q2: Bootstrap 4以降でブロック要素を中央揃えするには？

A2: mx-autoクラスを使用します。mx-autoクラスは、左右のマージンを自動的に設定することで中央揃えを実現します。

Q3: テキストの中央揃えはどうすればいいですか？

A3: text-centerクラスを使用します。text-centerクラスは、テキストを水平方向に中央揃えします。

その他の参考記事:bootstrap 右寄せボタン