Bootstrap で要素を中央揃え

Twitter Bootstrap で要素を水平または垂直に中央揃えする方法

Twitter Bootstrap は、レスポンシブなウェブデザインを簡単に実装するための CSS フレームワークです。このフレームワークを使用すると、要素を水平または垂直に中央揃えする方法が提供されています。

水平中央揃え

容器を使用する

• container または container-fluid クラスを使用します。これにより、要素が自動的に中央揃えされます。

<div class="container">
    <div class="text-center">
        <p>中央揃えのテキスト</p>
    </div>
</div>

text-center クラスを使用する

• text-center クラスを直接要素に適用することで、水平中央揃えを実現できます。

<p class="text-center">中央揃えのテキスト</p>

垂直中央揃え

Flexboxを使用する

• d-flex クラスを親要素に、align-items-center クラスを子要素に適用します。

<div class="d-flex align-items-center">
    <img src="image.jpg" alt="画像">
    <p>中央揃えのテキスト</p>
</div>

justify-content-center クラスを使用する

• justify-content-center クラスを親要素に適用して、子要素を水平方向に中央揃えし、その後、align-items-center を使用して垂直方向に中央揃えします。

<div class="d-flex justify-content-center align-items-center">
    <img src="image.jpg" alt="画像">
    <p>中央揃えのテキスト</p>
</div>

重要なポイント

• 必要に応じて、カスタム CSS を使用してより細かい調整を行うことができます。
• 適切なクラスを使用し、要素の構造を考慮してください。

Twitter Bootstrap で要素を中央揃えするコード例

<div class="container">
    <div class="text-center">
        <p>中央揃えのテキスト</p>
    </div>
</div>

• text-center クラスは、要素を水平方向に中央揃えします。
• container クラスは、要素を自動的に中央揃えする容器を作成します。

<p class="text-center">中央揃えのテキスト</p>

<div class="d-flex align-items-center">
    <img src="image.jpg" alt="画像">
    <p>中央揃えのテキスト</p>
</div>

• d-flex クラスは、要素をフレックスボックスレイアウトにします。

<div class="d-flex justify-content-center align-items-center">
    <img src="image.jpg" alt="画像">
    <p>中央揃えのテキスト</p>
</div>

• 要素の左右に等しいマージンを設定することで、水平中央揃えを実現できます。

.centered-element {
    margin: 0 auto;
}

position: absolute と left: 50% を使用する

• 要素を絶対配置し、左端を親要素の中央に設定します。

.centered-element {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

line-height を使用する

• 要素の高さと line-height の値を同じにすることで、垂直中央揃えを実現できます。

.centered-element {
    height: 100px;
    line-height: 100px;
}

.centered-element {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.container {
    display: flex;
    align-items: center;
}