真ん中に寄せることができません

2025.03.22

要素を中央に配置する際は、何を真ん中に持ってくるかによって、使用するCSSプロパティが異なります。ここでは、inlineとblockそれぞれの中央配置方法について詳しく解説します。

1. inlineを中央に持ってくる

inline要素は自体に text-align: center; を指定しても中央に配置されません。inline要素を中央に配置するには、次の2点が重要です。

• inline要素をblock要素で囲む
• block要素に text-align: center; を指定

2. inline要素の中央配置の例

✅ HTMLの構造

<!-- HTML -->
<div>
    <img src="example.jpg" alt="example">
</div>

✅ CSSの指定

/* div内の画像を真ん中にします */
div {
    text-align: center;
}

• <img>はデフォルトでinline要素なので、text-align: center;で中央に配置されます。
• <a>や<span>といったinline要素も同様の方法で中央にできます。

⚠️ ポイント

• inline要素に直接 text-align: center; を指定しても効果はありません。必ずblock要素で囲み、そのblock要素に text-align: center; を指定する必要があります。

3. block要素を中央に持ってくる

<div>や<p>などのblock要素は、text-align: center;を指定しても、要素自体が中央に移動するわけではありません。これは、text-alignが要素内のテキストを中央に配置するためのプロパティだからです。

block要素そのものを中央にするには、以下の2点が重要です。

1. 幅 (width) を指定する
2. margin-inline: auto; を指定する

4. block要素の中央配置の例

HTMLの構造

<div class="center-box">
    これは中央に配置されたブロックです。
</div>

CSSの指定

.center-box {
    width: 300px;     /* 要素の幅を指定 */
    margin-inline: auto;    /* 左右のマージンを自動調整して中央配置 */
}

margin-inline: auto;は横幅 (width) が指定されている場合にのみ有効です。左右の余白が自動調整され、結果的に中央に配置されます。

5. まとめ

See the Pen centering by Miyazaki Yuuki (@M-Yuuki) on CodePen.