关闭

浏览器屏幕上显示的块级元素居中

91人阅读 评论(0) 收藏 举报
1、首先知道整个屏幕的高度和宽度
 获得屏幕的宽度和高度:    
 alert(document.documentElement.clientWidth);    
  alert(document.documentElement.clientHeight);

2、居中则要设置块级元素的top 、left 值
则需先将块级元素设置成绝对定位,绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>。假设块级元素的width:350px height:250px
然后计算left = (document.documentElement.clientWidth - 350) / 2;

top= (document.documentElement.clientHeight - 250) / 2;

封装居中函数库 以及浏览器大小改变函数:
//设置物体居中
Base.prototype.center = function(width,height){
	var left = (document.documentElement.clientWidth - width) / 2;
	var top = (document.documentElement.clientHeight - height) / 2;
	for (var i = 0; i < this.elements.length; i++) {
        this.elements[i].style.top = top + 'px';
        this.elements[i].style.left = left + 'px';
    }
	return this;
}

//出发浏览器窗口事件
Base.prototype.resize = function(fn){
	window.onresize = fn;
	return this;
}
假设现有一个div块级元素的宽350px 高250px;
html代码:
<div id="login">
	<h2><img src="img/close.png"alt="" class="close">网站登录</h2>
	<div class="user">账号:<input type="text" name="user" class="text" /> </div>
	<div class="pass">密码:<input type="password" name="pass" class="text" /></div>
	<div class="button"><input type="button" class="submit" value=""/> </div>
	<div class="other">注册新用户  |  忘记密码?</div>
</div>

css代码:
 #login{
 	width:350px;
 	height:250px;
 	border:1px solid #ccc;
 	position: absolute;
 }


采用封装后的函数调用实现块级元素一直居中:
var login = $().getId("login");   //简化代码
	login.center(350,250).resize(function(){
		login.center(350,250);
	});



















0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:1338次
    • 积分:101
    • 等级:
    • 排名:千里之外
    • 原创:8篇
    • 转载:0篇
    • 译文:1篇
    • 评论:0条
    文章存档