text-alignが効かない！vertical-alignが効かない！

Posted at 2023-03-29

はじめに

text-align や vertical-align を指定しているのにうまく効かなくて困ったことはありませんか？

「text-align: center; は水平方向に中央寄せしてくれるもの」
「vertical-align: middle; は垂直方向に中央寄せしてくれるもの」

最初にこう覚えてしまったことがすべての元凶です。
これから新人が入ってきて「うまく効いてくれないんですけどなんでですか？(;o;)」と質問されるかもしれません。そんな事態に備えて、なぜ効かないのか、何を確認したら良いのかをちゃんと説明できるようになっておきましょう！

「ブロック要素に指定して、要素内のインライン要素の位置を水平方向に変えるもの」です。
CSS: カスケーディングスタイルシート

div や p などのブロック要素に指定しているかを確認してください。

位置を決める要素自体ではなく、その親要素に指定してください。
指定する要素と位置が決まる要素が異なることを覚えておきましょう。

text-align はインライン要素の位置を決めるものなので、いくらブロック要素である親要素に指定していたとしても肝心の位置を決める要素がブロック要素だと効きません。
ブロック要素自体を中央寄せにするには、margin: 0 auto; を使ってください。

「インライン要素同士を垂直方向に整列するもの」です。
CSS: カスケーディングスタイルシート

vertical-align はインライン要素とtableのセル要素に使えるものです。
ブロック要素に指定していても効きません。
インライン要素でもfloatがかかっていたり、position: absolute; がかかっていると効かないので注意しましょう。

子要素に継承されないため、位置を決める要素自体に指定します。

こう見るとこの2つってかなり紛らわしいですよねぇ〜。