インライン要素を中央寄せにする3つの方法 - リベルタ株式会社クリエイティブ制作事業

CSSを利用していると

text-align:centerをインライン要素に設定したけども、中央寄せにならない

という現象に遭遇してしまうのは、誰もが通る道ではないでしょうか。

この記事では、CSSを使用してインライン要素を中央寄せにする3つの代表的な方法について解説します。

インライン要素にtext-align:centerは効かない

まず、インライン要素は、ブロック要素とは異なりtext-align:centerを効かせることができません。

その理由は、親要素に対して通常100%で表示されるブロック要素とは異なり、インライン要素の場合は、その要素の幅しか持てないからです。

たとえば、分かりやすくするためにブロック要素とインライン要素それぞれに背景色を付けてみると、以下のようになります。

ブロック要素

インライン要素

ブロック要素が親要素に対して100%の幅で表示されるのに対して、インライン要素はそのテキストの幅までしか背景色が付いてないですよね。

つまり、インライン要素にtext-align:centerを設定しても、その要素の幅しか持てないインライン要素では、中央がどこなのかをブラウザが計算することができないのですね。だから、インライン要素にはtext-align:centerを効かせることができないわけです。

では、どのようにすればインライン要素を中央寄せにできるのか、その3つの方法を次から説明していきましょう。

最も一般的な方法は、親要素に対して text-align: center を指定することです。これにより、親要素内のすべてのインライン要素（例えば、テキストや画像）を中央に寄せることができます。

See the Pen Untitled by libertainc (@libertainc) on CodePen.

flexboxを利用することで、子要素となるインライン要素を中央寄せにすることができます。flexboxは要素が複数ある場合も、横並びかつ中央寄せのレイアウトを簡単に実現できます。

See the Pen Untitled by libertainc (@libertainc) on CodePen.

また、flexboxでは親要素に高さを与え、align-items:center;を指定すれば縦方向にも中央寄せにできます。

gridもflexboxと同様、子要素となるインライン要素の中央揃えを簡単に実現できます。

flexboxではjustify-content: centerで横方向に中央寄せを、align-items:centerで縦方向に中央寄せを実現しましたが、gridではplace-items: centerという1つのプロパティだけで縦横両方を中央揃えにすることができます。

この他にもインライン要素を中央寄せにする方法はさまざまあります。

シンプルに1つの要素を中央寄せにしたいだけであればtext-align:centerを、複数の要素や複雑なレイアウトで中央寄せを実現したい場合にはflexboxやgridレイアウトを検討すると良いでしょう。

ご不明な点などありましたら、リベルタまでお気軽にご相談ください。