23
Oct
Oct
ページの中央縦に配置するCSS
[ css : webサイトデザイン : webデザイン : xoops ]
いま開いているページの中央で、なおかつウィンドウの大きさに合わせて、いつもど真ん中にコンテンツを配置したい時に、CSSでレイアウトを設定すると縦の位置はどうしてもそのDIV要素の中身に依存してしまい、思うようにDIV要素の高さを調整することができないので、病むえずtableタグでheight=100%とかでレイアウトすることになる訳ですが、CSSでもそれと同じようにど真ん中に配置する方法のメモ。
【HTML】
<div id="conts"> <h1>お知らせ</h1> ここにコンテンツくるぞ </div>
【CSS】
#conts {
width: 600px;
height: 250px;
margin: -150px 0px 0px -300px;
left: 50%;
top: 50%;
position: absolute;
}
marginの上と左をコンテンツ領域の半分にするとちょうどど真ん中に収まるということ。
コメントする