今回もコーディング初心者向けのテクニックです。要素の位置を寄せたいとき、「スタイルで指定しているのにできない！」という時があるかと思います。その解決法です。
インライン要素を寄せるとき
text-alignを使います。左寄せ
text-align: left
中央寄せ
text-align: center
右寄せ
text-align: right
text-alignは、インライン要素にしか適用されません。
ブロック要素を寄せるとき
marginを使います。左寄せ
margin-right: auto
中央寄せ
margin: 0px auto
右寄せ
margin-left: auto
ただし、ブロック要素を寄せるときには、同時にその要素の横幅を指定しなければなりません。
また、IE6ではxml宣言があると、ブラウザ側が後方互換モードで表示してしまうため、margin:auto;が効かなくなります。そこで、IE独自の「text-alignがブロック要素にも適用される」というバグを利用し、IE6のみに適用されるハックを使ってbody全体にtext-align: centerを適用し、寄せたい要素にtext-align: leftやrightを使って任意の方向に寄せる、ということを行わなければなりません。
text-alignとmarginの違いとしては、text-alignは指定した要素の子要素が寄せられ、marginは指定した要素そのものが寄せられます。例えて言うなら、箱の中身に砂が入っているとして、text-alignは箱を傾けて砂をいずれかの方向に寄せ、marginは箱そのものをずらす、ということになります。
左右寄せ・中央寄せはレイアウトの基本なので、ぜひ覚えて活用してみてください。
