Bootstrap列でコンテンツを中央に配置する方法：3つの簡単テクニックと応用例
Bootstrap 列でコンテンツを中央に配置する方法
text-align プロパティを使用する
これは、最も簡単でシンプルな方法です。 以下のコードのように、コンテンツを含む要素に text-align: center; クラスを追加するだけです。
<div class="col-md-4 text-center">
<h2>コンテンツの見出し</h2>
<p>本文</p>
</div>
margin プロパティを使用して、コンテンツを左右に中央に配置することもできます。 以下のコードのように、コンテンツを含む要素に margin: 0 auto; クラスを追加するだけです。
<div class="col-md-4" style="margin: 0 auto;">
<h2>コンテンツの見出し</h2>
<p>本文</p>
</div>
flexbox を使用する
Bootstrap 4 以降では、flexbox をを使用してコンテンツを中央に配置することもできます。 以下のコードのように、コンテンツを含む要素に d-flex justify-content-center align-items-center クラスを追加するだけです。
<div class="col-md-4 d-flex justify-content-center align-items-center">
<h2>コンテンツの見出し</h2>
<p>本文</p>
</div>
offset クラスを使用する
Bootstrap の offset クラスを使用して、コンテンツを左右にオフセットすることもできます。 以下のコードのように、コンテンツを含む要素に col-md-4 offset-4 クラスを追加すると、コンテンツは画面の右側に中央に配置されます。
<div class="col-md-4 offset-4">
<h2>コンテンツの見出し</h2>
<p>本文</p>
</div>
補足
- 上記の方法に加えて、Bootstrap には
center-blockクラスもあります。 これは、ブロックレベルの要素を水平方向に中央に配置するために使用できます。 - 垂直方向にコンテンツを中央に配置するには、
align-items-centerクラスを使用できます。
これらの方法を組み合わせることで、さまざまなレイアウトを作成することができます。 ご自身のニーズに合った方法を選択してください。
Bootstrap 列でコンテンツを中央に配置するサンプルコード
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 列でコンテンツを中央に配置</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-qBiT1w5T6yXUtB6r2rZfI9+U0W+9c9sa9g8yW9YIM+D65Q20F50L2U1rZ+j60h" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 text-center">
<h2>コンテンツの見出し</h2>
<p>本文</p>
</div>
<div class="col-md-4" style="margin: 0 auto;">
<h2>コンテンツの見出し</h2>
<p>本文</p>
</div>
<div class="col-md-4 d-flex justify-content-center align-items-center">
<h2>コンテンツの見出し</h2>
<p>本文</p>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-oVuVTLgG3PnJ7zQ8c6i5f5z4g2vW80W3IMvKMzQkL8b8g5oW5hLWqRwk6U" crossorigin="anonymous"></script>
</body>
</html>
CSS
/* 独自の CSS をここに追加 */
説明
このコードは、3 つの列を含む行を作成します。 各列には、異なる方法で中央に配置されたコンテンツが含まれています。
- 1 番目の列は、
text-align: center;クラスを使用してコンテンツを中央に配置します。 - 3 番目の列は、
d-flex justify-content-center align-items-centerクラスを使用してflexboxを使用してコンテンツを中央に配置します。
このコードは、Bootstrap 列でコンテンツを中央に配置する方法のほんの一例です。 ご自身のニーズに合わせて、さまざまな方法を組み合わせて使用することができます。
注: 上記のコードは、Bootstrap 5.3.0-alpha1 を使用しています。 Bootstrap の古いバージョンを使用している場合は、CSS クラスやプロパティが異なる場合があります。
Bootstrap 列でコンテンツを中央に配置するその他の方法
グリッドシステムのオフセットカラムを使用する
Bootstrap のグリッドシステムには、オフセットカラムと呼ばれる機能があります。 これを使用して、コンテンツを左右にオフセットすることができます。 コンテンツを画面の両端に中央に配置するには、以下のコードのように col-*-offset-* クラスを使用します。
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h2>コンテンツの見出し</h2>
<p>本文</p>
</div>
</div>
このコードは、コンテンツを含む列を画面の右側に 3 分の 1 だけオフセットします。 コンテンツは画面の残りの部分に中央に配置されます。
position プロパティと left および right プロパティを使用して、コンテンツを絶対配置し、手動で中央に配置することもできます。 以下のコードのように、コンテンツを含む要素に以下のスタイルを適用します。
.center-content {
position: absolute;
left: 50%;
transform: translate(-50%, 0);
}
この CSS は、コンテンツを含む要素を絶対配置し、水平方向に 50% だけ左にオフセットします。 transform: translate(-50%, 0); プロパティは、コンテンツを元の位置から 50% だけ左に移動するために使用されます。
.center-content {
display: table-cell;
vertical-align: middle;
}
この CSS は、コンテンツを含む要素をテーブルセルとして表示し、垂直方向に中央に配置します。
JavaScript を使用して、コンテンツを動的に中央に配置することもできます。 以下のコードは、コンテンツを含む要素の幅と高さを取得し、それを基に要素を水平方向と垂直方向に中央に配置する簡単な例です。
function centerElement(element) {
var width = element.offsetWidth;
var height = element.offsetHeight;
var top = (window.innerHeight - height) / 2;
var left = (window.innerWidth - width) / 2;
element.style.position = 'absolute';
element.style.top = top + 'px';
element.style.left = left + 'px';
}
var element = document.getElementById('my-element');
centerElement(element);
このコードは、my-element ID を持つ要素を中央に配置します。 独自の要件に合わせてこのコードを調整する必要があります。
これらの方法はほんの一例であり、Bootstrap 列でコンテンツを中央に配置する方法は他にもたくさんあります。 ご自身のニーズに合った方法を選択してください。
html css twitter-bootstrap
