吴伟贤のBlog

Feed Rss

浮动div居中代码

03.01.2011, div+css & html, by .

写一段多浏览器兼容的浮动div居中代码,存档。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>at center</title>
</head>
<script>
function floatdiv()
{
document.getElementById("mydiv").style.left=(document.body.offsetWidth-document.getElementById("mydiv").offsetWidth)/2+document.body.scrollLeft;
document.getElementById("mydiv").style.top=(document.body.clientHeight-document.getElementById("mydiv").offsetHeight)/2+document.body.scrollTop;
}
window.onload=floatdiv;
window.onscroll=floatdiv;
</script>
<body>
<div id=mydiv style="position:absolute;width:400px;height:200px;background:lightgreen;border:1px solid yellow;line-height:200px;vertical-align:middle;text-align:center">welcome</div>
<p>ballackballackballackballackballackballackballackballackballackballackballackballackballackballackballackballackballackballackballackballackballackballackballackballackballackballackballack</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p>
</body>
</html>

评论已关闭。