-2
A
答えて
0
0
<html>
<head>
<title>vertical align</title>
<style>
* {margin:0px;padding:0px}
#content {height:490px; width:960px; position:absolute; border: 2px #000 solid}
</style>
<script>
function resize(){
var content = document.getElementById('content');
var body = document.getElementsByTagName('body')[0];
if(window.getComputedStyle){
var bodyHeight = window.getComputedStyle(body).height.replace('px','');
}else if(body.runtimeStyle){
var bodyHeight = body.offsetHeight;
}
content.style.top = (bodyHeight - 490)/2 + 'px';
}
window.onresize = window.onload = resize;
</script>
</head>
<body>
<div id="content">
</div>
</body>
</html>
0
#content{
height: 490px;
margin-top: -245px;
top: 50%
}
0
伝統的な方法は、テーブルを使用してvertical-align:middle;
を設定することですが、レイアウトにテーブルを使用することになりました悪い習慣と考えられています。新しいソリューションは柔軟なボックスレイアウトですが、それでも広くサポートされていません。したがって、ここに中間的な解決策があります。ちょっとハッキリですが、すべてのブラウザで作業が完了し、テーブルは使用されません。 (live demo)
<!doctype html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<title>positioning test</title>
<style type='text/css'>
* {margin:0; padding:0;}
body {position:absolute; width:100%; height:100%;}
#pad {height:50%; min-height:245px;}
#content {height:490px; margin-top:-245px;
background:#f88; border:2px solid #000;}
</style>
</head>
<body>
<div id='pad'></div>
<div id='content'></div>
</body>
</html>
このためにJavaScriptを使用しないでください - それは絶対に必要な場合を除き、レイアウトのためにJavaScriptを使用することは非常に悪いアイデアだし、このために、それは確かに必要はありません。また、2つのdivを組み合わせることはできません。#content {position:absolute; top:50%;}
を設定することができます.#pad
には正しいmin-height
が含まれている必要があります。そうでないと、490px(例では494px)より短いウィンドウに表示されます。垂直配向ページへ
0
リンクは、あなたが(それを[縦のdivを(なしのテーブル)揃える]の
が重複する可能性を行う方法を知って来る&
Hereだけでページのソースを見る....ここにありますhttp://stackoverflow.com/questions/1909753/vertically-align-div-no-tables)と何百もの他の何百ものこことSOとインターネット。 – Rob