【CSS】text-alignがうまく効かない
CSSで文章の配置を決めるプロパティであるtext-alignですが、ちゃんと理解してないと機能してくれないことも多い。
最初の事例。
<p class="test-left">
文章①
<p class="test-center">
文章②
</p>
文章③
</p>
文章①~③はまとめて一つの枠囲みにしたく、そのうえで文章②だけを中央配置にしたかったのだが、上記コードで.test-centerを動かすことは出来なかった。class="test-center"をp→spanにしても動かず。
<p class="test-left">
文章①
<div class="test-center">
文章②
</div>
文章③
</p>
中央寄りにしたいところをdivにしてみたが、今度は枠囲みが①のみになってしまったので✕。
<div class="test-left">
文章①
<p class="test-center">
文章②
</p>
文章③
</div>
最終的にこれで解決。
どうやらセレクタが持つ「インライン要素」と「ブロック要素」という性質が大きく関わっているよう。
文字や画像 などのインライン要素を左寄せ・中央寄せ・右寄せするときは、インライン要素を囲んでいる
div
・p
・li
などのブロック要素にtext-align
を指定します。
引用元:
インライン要素を左寄せ・中央寄せ・右寄せする方法 - CSSテクニック - acky.info
ということなのでこのプロパティは「インライン要素を囲んでいるブロック要素」に適用するようにしよう。
※追記( 03/04 )
HTML5以降では「ブロック要素」「インライン要素」という言い方は廃止されたようですね…