CSS を使用したインライン ブロックの中央揃え

1. text-align CSS プロパティを使用してインライン ブロックを中央に配置する
2. justify-content および display CSS プロパティを使用してインライン ブロックを中央に配置する
3. left、position、および transform CSS プロパティを使用する

この記事では、複数の HTML 要素を作成し、それらの表示を inline-block に設定します。 その後、display: inline-block を使用してすべての要素を中央に配置する方法を学習します。

text-align CSS プロパティを使用してインライン ブロックを中央に配置する

この例では、parent クラス名を持つ <div> 要素を作成しました。 その <div> 要素内に、child という同じクラス名を持つさらに 3つの <div> 要素を追加しました。

また、クラス名 child を持つすべての <div> 要素に異なる background-color を与えました。

ここでは、クラス名 child を持つすべての要素に display:inline-block を設定しました。 すべての要素を中央に配置するために、クラス名 parent を持つ親 <div> 要素に text-align: center プロパティを適用しました。

出力では、3つの子 <div> 要素すべてが Web ページの中央に配置されていることがわかります。

HTML コード:

<div class="parent">
    <div class="child" style="background-color: green">First</div>
    <div class="child" style="background-color: red">Second</div>
    <div class="child" style="background-color: blue">Third</div>
</div>

CSS コード:

.parent {
    text-align: center;
}
.child {
    display: inline-block;
    font-size: 30px;
}

justify-content および display CSS プロパティを使用してインライン ブロックを中央に配置する

この部分では justify-content と display CSS プロパティを使用します。 justify-content プロパティの center 値を使用して、要素のコンテンツ全体を中央に配置できます。

たとえば、クラス名 container を持つ <div> 要素を作成しました。 その後、<div> 要素内にテキストを含む 3つの <p> タグを追加しました。

すべての段落を 1 行に表示するには、display:inline-block の代わりに CSS の display: flex プロパティを使用できます。 すべての <p> 要素を一度に中央揃えにするために、justify-content: center プロパティをすべての <p> 要素の親クラスである container クラスに適用しました。

HTML コード:

<div class="container">
    <p style="background-color: green">Welcome</p>
    <p style="background-color: red">To The</p>
    <p style="background-color: blue">DelftStack</p>
</div>

CSS コード:

.container {
    font-size: 30px;
    display: flex;
	flex-direction: row;
    justify-content: center;
}

left、position、および transform CSS プロパティを使用する

left、position、および transform CSS プロパティを使用して、すべての要素を display: inline-block で中央揃えにします。 left プロパティを使用すると、要素の左位置を設定できます。

transform プロパティは、要件に従って要素をその位置から移動します。 position プロパティを使用して、要素の配置方法を指定できます。

たとえば、outer クラス名を持つ <div> を作成し、コードには inner クラス名を持ついくつかの <p> 要素が含まれています。 inner クラス名を持つすべての要素について、display: inline-block を使用してインラインで表示しました。

outer クラスに left: 50% を使用し、その位置を absolute に設定して、body 要素である親要素に関連する <div> 全体を移動します。 その後、transform: translate(-50%) プロパティを使用して、クラス名が outer の <div> 要素を、負の x 方向に 50% 幅だけ移動しました。

このようにして、outer クラス名で <div> 要素を中央に配置できます。

HTML コード:

<div class="outer">
    <p class="inner" style="background-color: green">ABCD</p>
    <p class="inner" style="background-color: red">EFG</p>
    <p class="inner" style="background-color: blue">HIJ</p>
</div>

CSS コード:

.outer {
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
}
.inner {
    font-size: 30px;
    display: inline-block;
}

この記事では、display: inline-block を使用して要素を中央に配置するさまざまな方法を学びました。