今回は、絶対便利!ページ全体を画面の中央に揃える方法です。
タグの中にある幅を指定したボックスを、
画面の中央に揃えてみましょう。
まず、
タグに
というスタイルシートを指定します。
widthは任意の幅でいいので、必ず指定して下さい。
margin-left:auto;にあるように、autoとは
左の余白(margin)を自動的に空ける』
という意味です。
ですので、左と右にautoを指定しているので、
左右の余白を自動で割り振り空けますよ』
という意味になります。
divに横幅を指定してやることで
bodyの横幅からdivの横幅を引いた残りの幅を、
自動で左右の余白をあてているのです。
なので、画面の中央に揃っているのです。
今回の書き方は分かりやすく左と右に分けて書きましたが、
margin:0px auto;と書いても同じ意味になります!
ただ、実はこれだけではIEで表示出来ない場合があります。
そこで
タグにスタイルシートを指定します。
と入れてみてください。
これでどのブラウザでも画面中央揃えになることができます!
しかし!!
こうするとbodyの中に書いたものが全てcneterになってしまう、
つまりdivの中に書いた文字や画像も全部中央に寄ってしまうんですね。
なので、
タグのスタイルシートに
を追加してあげて下さい。
これで、divの中に文字を書いても画像を入れても全部左に寄って表示されます。
これで完成です。
ウィンドウの幅を変えてみても
常にdivに囲まれた範囲が中央に位置しているはずです。
白背景では分かりにくいと思いますので、divの背景に色をつけてやると
分かりやすいと思います。
これは絶対に便利!ですので、是非使ってみてくださいね☆
| http://www.ryuumu.co.jp/ryuumu/stuffblog/index.php?e=329 |
|
ソース(ホームページ)のレシピ by 委員長! | 07:06 PM | comments (x) | trackback (x) |