サイト全体を上下中央配置にする方法
サイト全体を包むdiv要素を上下中央配置にしたい！って声をちょこちょこ聞きますので解説をしていきたいと思います。
でも個人的に普通のWebサイトを上下中央にするのは好まないですよね...
フルFlashのサイトかや写真をメインに見せたいようなフォトギャラリー系のサイトなら良いと思うので今回は以前にも解説をしたlightview.jsを使ったPhoto Galleyのサイトをデモページとして作ってみました。
上下中央配置の解説
XHTML
<body>
<div id="contents">
<h1>...</h1>
<ul>
...
</ul>
<address>Copyright...</address>
<!-- / #contents --></div>
</body>
CSS
div#contents {
width: 920px;
height: 580px;
position: absolute;
top: 50%;
left: 50%;
margin: -310px 0 0 -480px;
padding: 20px;
}
- サイト全体の横、縦の幅を指定します。
- サイト全体を包むdiv要素にposition: absolute;をかけます。上記ソースで言うdiv#contentsです。
- top: 50%;とleft: 50%;で上と左の要素を中央配置にしています。
- 右の要素と左の要素を中央にする為に、コンテツの幅、高さの半分の値だけネガティブマージンを指定します。（この時padding領域も含めた値の半分にして下さい。）
これでサイト全体を上下中央配置に出来るので、中身の要素は好きにしてくれれば良いです。
この方法はブラウザの中央に配置させる為に、起点を中心にしている為今言われるようにウィンドウを小さくした際、中心が表示されてしまいます。
自分の知っている限りの知識ではarchmさんがおっしゃってるやり方は無理なような気がします…
力になれなくてすみません。
もしやり方が分かった際にはエントリーしたいと思います！
2009年03月10日 16:19