CSSでボタンやテキストを中央揃えしようとして、align-items: centerを指定したのに何も変わらなかった経験はありませんか？
例えば、ボタンの背景色やサイズは正しく表示されているのに、中の文字だけが上に寄ってしまうことがあります。
そんなとき、align-itemsの数値や余白を調整する前に確認したいのが、親要素のdisplayプロパティです。
この記事では、align-items: centerが効かない原因と、Flexboxを使った中央揃えの方法を解説します。justify-contentとの違いや、うまく配置できないときの確認ポイントも紹介します。
align-items: centerが効かない原因とは？
align-items: centerは、要素を中央に配置するときによく使われるCSSプロパティです。
ただし、指定するだけですべての要素が中央に移動するわけではありません。まずは、どのような条件で機能するのかを確認しましょう。
display: flexが指定されていない
Flexboxでalign-itemsを使う場合は、親要素にdisplay: flexを指定する必要があります。
例えば、次のCSSを見てください。
.help-button {
width: 160px;
height: 46px;
background-color: #e15252;
align-items: center;
}この状態では、通常のブロック要素にalign-items: centerを書いても、期待した縦方向の中央揃えにはなりません。
そこで、次の指定を追加します。
.help-button {
display: flex;
align-items: center;
}これでFlexboxが有効になり、子要素を交差軸方向の中央に配置できます。
なお、align-itemsはGridレイアウトなどでも使えるため、必ずFlexbox専用というわけではありません。
align-itemsは親要素に指定する
もうひとつ確認したいのが、CSSを指定する要素です。
Flexboxでは、親要素をFlexコンテナ、その直下の子要素をFlexアイテムと呼びます。
<div class="help-button">
<a href="#">Help Me</a>
</div>この場合、.help-buttonが親要素、aタグが子要素です。
ボタンの中の文字を配置したいなら、Flexコンテナとなる.help-buttonにalign-itemsを指定します。
ボタンの文字を上下左右中央にする方法
ボタン内の文字を中央に配置したい場合は、align-itemsとjustify-contentを組み合わせると便利です。
実際のコーディングで使える例を見ながら、それぞれの役割を整理しましょう。
displayと2つの中央揃え指定を組み合わせる
次のCSSでは、幅160px、高さ46pxのボタンを作成しています。
.help-button {
width: 160px;
height: 46px;
border-radius: 40px;
background-color: #e15252;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
}通常のflex-direction: rowでは、各プロパティの役割は次のとおりです。
| プロパティ | 役割 |
|---|---|
display: flex | Flexboxを有効にする |
justify-content: center | 子要素を横方向の中央へ |
align-items: center | 子要素を縦方向の中央へ |
justify-contentとalign-itemsは、どちらもFlexコンテナの中にある子要素の配置を調整する指定です。
ボタンそのものをページの中央に置く指定とは区別しましょう。
flex-directionによって中央揃えの方向が変わる
Flexboxでは、flex-directionによって主軸の方向が変わります。
初期値のrowでは主軸が横方向ですが、columnに変更すると縦方向になります。
.box {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}この場合、justify-contentは縦方向、align-itemsは横方向の配置を担当します。
そのため、「align-itemsは必ず縦方向」と覚えるのではなく、主軸に対する交差軸を調整するものと理解しておくことが大切です。
align-itemsが効かないときの確認ポイント
display: flexを指定しても、思った位置に配置できない場合があります。
そのときはCSSを増やす前に、親要素と子要素の関係や、レイアウトの条件を確認してみましょう。
高さや余白、指定する要素を確認する
特に確認したいのは、次の項目です。
- 親要素に
display: flexが指定されているか align-itemsをFlexコンテナに指定しているかflex-directionがrowかcolumnか- 中央揃えする方向に余白があるか
marginやpaddingが配置に影響していないか
例えば、親要素の高さが子要素とほとんど同じ場合、align-items: centerを指定しても見た目の変化は小さくなります。
また、text-align: centerは主にテキストなどのインラインコンテンツを水平方向に揃える指定です。
Flexboxのalign-itemsとは役割が異なるため、何を中央に配置したいのかを整理して使い分けましょう。
【まとめ】align-itemsはFlexboxの設定と配置方向を確認する
align-items: centerが効かないときは、まず親要素のdisplayを確認しましょう。
Flexboxで子要素を中央揃えするには、display: flexを指定したうえで、必要に応じてjustify-contentとalign-itemsを組み合わせます。
今回のポイントは、中央にしたい要素と、CSSを指定する要素を区別することです。
また、flex-directionによって配置方向が変わる点にも注意が必要です。
CSSが思ったように効かないときは、プロパティを追加し続けるよりも、まずFlexboxの仕組みと親子関係を確認してみましょう。