cssでbody内のコンテンツを中央（center）にする
htmlやcssを使っている人にとって、中央ぞろえはさほど難しくはないと思います。
ブロック内のテキストを中央配置するためには、text-align:center;で問題りません。
divやテーブル関係のタグで良く使われます。
しかし、body全体で中央揃えを設定するためには、少々コツが必要です。
今回はこちらを紹介します。
body内で中央配置にするイメージ
完成図は以下のような感じです。
水玉の壁紙はbodyの背景画像です。
divやsectionタグでタイトル画像や文章を記載しているのですが、これが中央に配置されています。
もちろん、ブラウザの幅を変えても自動で中央に移動（？）するようにします。
alignやtext-alignで中央揃えは設定できず
中央揃えなので、cssで、bodyの設定で、align:center;とすれば問題なさそうですが、こちらは間違いです。
私はhtmlエディターとしてBracketsというソフトを使用しています。
こちらは、css記述の際に、一文字でも文字を打つと候補のcssコードがでてきます。
そこでalign自体が候補として出ません。
bodyでalignの設定はしないほうが良いようですね。
text-alignは設定できますが、centerとしても中央には配置されません。
やはり文章のみへの反映ですね。
bodyではmarginを上手に使う
中央配置するためには、左右のmarginを適切に確保すると考えることで解決です。
margin-leftとmargin-rightをautoに設定するだけ！
私は上下と共にmarign : 10 auto;とすることが定型になっています。
marginに２つの数値を記載した場合、margin : 上下 左右; の設定になります。
中央揃えを左右のマージンが自動で同値だけ確保されると考えを変えることがポイントでした。
ブログランキングに参加しています。
