text-align:centerが効く要素、効かない要素まとめ

2021-02-19

text-align:centerは一発で要素をど真ん中に配置できる便利プロパティですが、時々効く時と効かない時がありますよね。

なんとなーくで覚えてきた部分があるので、一度text-align:centerが効く要素と効かない要素を整理してみたいと思います。

text-align:centerはどの要素に対して効くのか？

text-align:centerが効かない原因は要素の種類にあります。

端的に言うと、text-align:centerはインライン要素に適用されブロック要素には効きません。

つまり、何がインライン要素で何がブロック要素かをしっかり把握しておけばtext-align:centerを記述したのに要素が真ん中に配置されない！ということを回避できます。

上記が全てではありませんが、実際に使われやすいであろうタグを選んでみました。

ブロック要素を真ん中に配置したい場合は以下の手順になります。