CSSでの中央寄せの問題：タグが中央に寄らない理由と解決方法

HTML、CSS

2025.09.20

CSSで要素を中央寄せにしたいとき、タグやその他のタグでうまくいくのに、タグだけ中央寄せができないことがあります。この記事では、なぜタグが中央寄せにならないのか、その理由と解決方法について説明します。

1. タグと中央寄せ

HTMLのタグは、テキストの下線を引くためのタグです。特にデフォルトでは、インライン要素として扱われます。インライン要素は、その親要素の幅に合わせてサイズが決まり、ブロック要素とは異なり中央寄せの方法が少し異なります。

そのため、タグを直接中央寄せしようとすると、期待通りの結果が得られないことがあります。

CSSで中央寄せを行う場合、ブロック要素に対しては簡単に中央寄せを行うことができます。例えば、

タグなどのブロック要素は、widthやmarginプロパティを使って容易に中央に配置できます。

しかし、タグはインライン要素であり、インライン要素はその親要素の幅に影響を受けません。そのため、中央寄せがうまく機能しないのです。

タグを中央寄せしたい場合、いくつかの方法があります。最も簡単な方法は、親要素に対してtext-alignプロパティを使うことです。この方法でタグを中央に配置することができます。

例えば、次のようにCSSを設定します。

div { text-align: center; }

これで、divタグ内のタグは中央寄せされます。

もし、インライン要素としてのタグをブロック要素として扱いたい場合、CSSでdisplayプロパティを変更することができます。以下のように、タグに対してdisplay: block;を指定すると、ブロック要素として扱われ、中央寄せが簡単にできます。

u { display: block; text-align: center; }

この方法で、タグも中央寄せできます。

タグを中央寄せしたい場合、インライン要素として扱われるため、通常のブロック要素と同じ方法で中央寄せができません。解決策としては、親要素にtext-align: center;を設定するか、タグ自体にdisplay: block;を指定することで、簡単に中央寄せができます。