CSSで文字やボタンを中央に配置するとき、text-align: centerとjustify-content: centerのどちらを使えばいいのか迷うことはありませんか？
どちらも中央揃えに使われるプロパティですが、配置する対象と仕組みが異なります。
例えば、ボタンの中の文字を中央にしたい場合と、ボタンそのものを親要素の中央に置きたい場合では、必要なCSSが変わります。
この記事では、text-alignとjustify-contentの違いを整理しながら、実際のコードを使って中央揃えの方法を解説します。
text-alignとjustify-contentの違いとは？
どちらも中央揃えに使われますが、対象となる要素や適用されるレイアウトが違います。
まずは、それぞれの基本的な役割を確認しましょう。
text-alignは文字やインライン要素を揃える
text-alignは、ブロックコンテナ内のテキストやインラインレベルの内容を水平方向に揃えるプロパティです。
例えば、次のように指定します。
.box {
text-align: center;
}これで、.boxの中にある文字やインライン要素を中央に揃えられます。
<div class="box">
<p>Hello World</p>
</div>この場合、文字は中央に配置されますが、p要素のボックス自体が中央に移動するわけではありません。
文章や見出しの文字を中央揃えしたいときに使いやすい方法です。
justify-contentはFlexboxなどの子要素を配置する
justify-contentは、FlexboxやGridなどのレイアウトで、主軸方向の配置を調整するプロパティです。
例えば、Flexboxでは次のように使います。
.box {
display: flex;
justify-content: center;
}この指定では、.boxの直下にあるFlexアイテムが主軸方向の中央に配置されます。
通常のflex-direction: rowでは主軸が横方向なので、子要素が横方向の中央に並びます。
ただし、flex-direction: columnでは主軸が縦方向になるため、justify-contentも縦方向の配置を担当します。
justify-contentは必ず横方向の中央揃えをする指定ではありません。
文字とボタンの中央揃えはどう使い分ける？
実際のWeb制作では、文字だけを揃えたい場合もあれば、ボタンの中身を上下左右の中央に配置したい場合もあります。
ここでは、よく使う2つのパターンを比較します。
文字だけを中央にするならtext-align
見出しや文章を中央に配置したい場合は、text-align: centerがシンプルです。
<div class="message">
<h2>Welcome</h2>
<p>Thank you for visiting.</p>
</div>.message {
text-align: center;
}これで見出しと文章の文字が中央に揃います。
テキストの配置が目的なら、必ずしもFlexboxを使う必要はありません。
ボタンの中身を中央にするならFlexbox
幅と高さを指定したボタンの中で、文字を上下左右の中央に置きたい場合は、Flexboxが便利です。
<div class="help-button">
<a href="#">Help Me</a>
</div>.help-button {
width: 160px;
height: 46px;
background-color: #e15252;
border-radius: 40px;
display: flex;
justify-content: center;
align-items: center;
}
.help-button a {
color: #fff;
text-decoration: none;
}この例では、justify-contentが横方向、align-itemsが縦方向の中央揃えを担当します。
一方、text-align: centerだけでは、ボタンの中身を縦方向の中央に配置することはできません。
両者の違いをまとめると、次のようになります。
| 比較項目 | text-align | justify-content |
|---|---|---|
| 主な対象 | 文字・インラインコンテンツ | Flex・Gridなどのアイテム |
| 配置方向 | インライン方向 | 主軸方向など |
| display | 不要 | Flexboxでは必要 |
| 縦方向の中央揃え | 基本的にできない | columnなどで可能 |
中央揃えできないときに確認したいこと
CSSを指定しても中央に配置されない場合、プロパティが間違っているとは限りません。
中央にしたい対象や、親要素のレイアウトを確認することで原因を見つけやすくなります。
中央にしたいのは文字か、要素そのものか
例えば、次のCSSを見てください。
.button {
width: 160px;
text-align: center;
}この指定で中央になるのは、基本的にボタン内の文字です。
幅160pxの.button自体を親要素の中央に移動させる指定ではありません。
幅を持つブロックレベルの要素を横方向の中央に置きたいなら、次の方法もあります。
.button {
width: 160px;
margin: 0 auto;
}このように、要素の中身を揃えるのか、要素自体を配置するのかを区別することが大切です。
displayやflex-directionを確認する
justify-content: centerが期待どおりに機能しないときは、親要素の設定を確認しましょう。
display: flexなどが指定されているか- 中央にしたい要素はFlexコンテナの直下にあるか
flex-directionはrowかcolumnか- 配置する方向に利用可能な余白があるか
また、justify-contentはFlexアイテム同士の配置を調整するため、Flexコンテナ自体を中央に移動する指定ではありません。
中央揃えがうまくいかないときは、CSSを追加する前に親子関係を確認してみましょう。
【まとめ】中央揃えは配置する対象で使い分ける
text-alignとjustify-contentは、どちらも中央揃えに使えますが、役割は異なります。
**文字やインラインコンテンツを揃えたい場合はtext-align、Flexboxなどで子要素の配置を調整したい場合はjustify-content**が基本です。
また、ボタン内の文字を上下左右中央にしたい場合は、align-itemsも組み合わせると便利です。
中央揃えが思ったようにできないときは、何を中央に置きたいのか、どの要素にCSSを指定しているのかを確認してみましょう。