初学者が結構な確率で引っかかるtext-align。当ブログに書いているCSSの記事の中でもアクセスが多いので結構な数の人がつまづいているのではないかと思っています。
図解すれば簡単に理解できると思いますので早速見ていきます。
text-alignはブロック要素そのものではなく、中身に作用する
巷にあふれるcss解説書などで、
「text-alignはインライン要素を中央寄せにする」と書いている場合があります。
思うに、これが誤解を招いている元凶です。
text-alignはインライン要素にも作用しますが、インライン要素そのものに指定しても意味がありません。ブロック要素に指定することでブロック要素の”中身（インライン要素など）”に作用しています。
例を挙げてみます。
<div style="text-align:center">
<p>本日は</p>
<span style="text-align:right">お日柄もよく</span>
</div>表示
↓
本日は
お日柄もよく
大枠にあたるdiv(ブロックレベル)にtext-align:centerを指定しています。
子要素のpタグは段落を意味するブロックレベル要素で、spanはインライン要素です。
ですが、両方とも親要素(divタグ)のtext-align:centerが作用して中央寄せになっています。
一方で、spanに指定したtext-align:right は効いていません。
text-alignは、「ブロックレベル要素の」 「中身」に対して作用するためです。
ブロック要素である<p>タグを箱とすると、「本日は」というテキストやインライン要素(span)は箱の中身です。
ブロック要素はレイアウトを定める箱。インライン要素は中身
div 、h、 pタグなどブロックレベル要素はwidth:100% の箱です。箱の中身がスカスカでも幅いっぱいに場所をとります。
spanやimg などのインライン要素は中身の大きさ = width になります。imgタグでwidth=”500px”の画像を指定したら500pxの場所をとって表示されます。勝手に画面いっぱいの幅になったりしません。ここまでで特に引っかかることはないと思います。
くどいですが、text-align はブロックレベル要素(箱)の中身に対して作用します。箱そのものに作用することはできません。インライン要素はそのもののサイズがwidthなので中央寄せしようにも隙間がありません。500pxの箱(imgタグ)に500pxの画像が入っていて中央寄せにしても意味がないですからね。
ブロック要素の外側に余白を指定するmargin
仮に
p{
width: 50% ;
}として、pタグのwidthを変えていたとしてもpタグ自体はtext-alignで動きません。
では、このpタグ（ブロック要素）を中央寄せしたいときはどうするのか？ でよく使われる手法がmargin:auto ;です。
marginの本来の使い方はブロック要素の外側に余白を設定することです。
marginとpaddingの使い分けもよく初心者を悩ませるやつですが、それは別の機会に。
marginは上下左右の余白を一括指定するプロパティです。
値を１つだけ指定したときは全方向に指定。４つ指定すると、上・右・下・左 に対し個別指定。
margin : 0 auto のように２つ指定したときは、前の値が上下、２番めの値は左右に作用します。
なぜ余白にautoを指定すると中央に寄るのか、という話を掘り下げるとそれだけでかなり長くなるのでそういうものなんだと思っておいてください。
marginはインライン要素にはきかない
ここまで散々ブロック要素だインライン要素だと話してきましたが、厳密にはhtml5で廃止された過去のものです。display:プロパティを使えば自由に変更できますし。
これまでの例でも、spanタグにdisplay:blockを。pタグにdisplay:inline を指定すると違った結果になります。
しかし、基本的な考え方やレイアウトを構築するにあたっては、やはりブロック要素・インライン要素と説明したほうが分かりやすいのでこのように説明いたしました。
ご理解の一助になりましたら幸いです。
