text-align:centerが効かない時の結局どこに書いたらいいんだ問題に今、終止符を打つ

 

text-align:center;がなかなか効かないんです、、結局どこに指定したら真ん中にいってくれるのか長い間よくわからず、闇雲につけて見たらいつの間にか真ん中行ってるけどなんかモヤモヤします。

ちづみ
わいは文字を真ん中にしたいんや、、、

text-align:center;とはなんなのかと対処法です。

text-align:center;をつけるのはブロック要素にだけ

 

なんやかんや効かない時はcssのtext-align:center;をどこに書いたか見直しましょう。インラインのaタグとかspanタグの中だったら効きません。text-align:center;はdivとかh2とかのブロック要素に書いた時のみ発動するのです!

以下text-align:center;のルール的なやつです。

text-align:center;
  1. text-alignはブロック要素に指定
  2. 親要素のtext-alignをつければその中に子要素はインライン要素でも発動される
  3. 子要素にtext-alignが指定すれば親要素全体に発動されない

よくあるつまづきは画像を中央寄せにしたくて、imgにtext-align:center;を書いちゃいがちですが、imgはインライン要素なので発動しません。

See the Pen
LaZLNb
by ちづみ🇰🇭ノマド女子 (@098ra0209)
on CodePen.

 

imgを中央寄せにしたい時はimgをdivで囲ってそのdivにtext-align:center;を書きます。divはブロック要素で、中の子要素はインライン要素でも発動されるので。

See the Pen
xBOdyx
by ちづみ🇰🇭ノマド女子 (@098ra0209)
on CodePen.

 

しかし、それでも効かない時があります。

ちづみ
ブロック要素にtext-align:center;を書いてるのにな〜〜

その場合は以下を試しましょう(`・ω・´)

 

ちゃんとその要素を狙ってcss指定をする

 

ちゃんとその要素を狙って、確実にその要素にcssが当たっているかセレクタ指定を確認しましょう。

「3年2組うるさいですよ」と注意するより、3年2組の田中、うるさいですよと言った方がわかってくれます。

text-align:center;をつけたいブロック要素にクラス名をつける

 

h2をtext-align:center;をかけたいけど効かない場合は<h2 class=”center”>みたいなのつけましょう。そのcenterにtext-align:center;をつけましょう。

もしかしたらinline-blockをつけていたりしてるかもしれないです。

まとめ

text-align:center;
  1. text-alignは、ブロック要素に指定
  2. 親要素のtext-alignをつければその中に子要素はインライン要素でも発動される
  3. 子要素にtext-alignが指定すれば親要素全体に発動されない