【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以降では「ブロック要素」「インライン要素」という言い方は廃止されたようですね…