用jquery实现垂直左右居中


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>居中</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<style>
   
	 .center {
				background-color: #FFFF00;
				height: 200px;
				width: 300px;
              } 
	 
</style>
<body>
       <div id="box">
	         <div class="center"></div>

	   </div>
</body>
<script>
    $(function(json){
	      function  Fjuzhong(){
		        var win ={},middle={};//win为浏览器的长宽对象,middle为要居中的元素的长宽对象
				var objDom =$(json.obj); 
				    win.width = $(window).width();
					win.height = $(window).height();
					middle.width = objDom.width();
					middle.height = objDom.height();
			    var left=(win.width-middle.width)/2+"px";
				var top=(win.height-middle.height)/2+"px";
					objDom.css({"margin-top":top,"margin-left":left});
					
					$(window).resize(Fjuzhong);//当浏览器长宽发生变化时,元素会相应居中
			
		  }
		  var json = {"obj":".center"};
		  Fjuzhong(json);
	});
</script>
</html>

 

 

用jquery实现垂直左右居中,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。