用jquery 使网页绝对居中在大于等于1024 *768分辨率下

最新推荐文章于 2020-06-19 13:52:15 发布

原创最新推荐文章于 2020-06-19 13:52:15 发布 · 180 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #CSS #HTML #ViewUI

web前端专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种使用jQuery实现网页内容居中的方法。通过获取body宽度并调整左右边距，使网页主要内容区域能够居中显示，适用于固定宽度的内容布局。

在你的网页中导入JQuery 的js库文件思路是通过 jquery 获取 body 的现有宽度
然后调整 body 的左边距或者右边距.
如下代码


  <html>
<head><title> 网页居中显示</title>

  <!--  这一行会因你的 JQuery.js 文件路径不同而有区别-->
   <script type="text/javascript" src="js/jquery.js"></script>
   <script   type="text/javascript" >
$(document).ready( function  ()
{    			   
  var      mybody=$("body");
  var      mywidth=mybody.width();  
//这里的1000 是网页具体内容显示的宽度  可根据你所需的宽度改动其 数值。
if(mywidth>1000)	   
 {	
 var   bianJu=(mywidth-1000)/2;										      mybody.css("margin-left" ,bianJu);										  mybody.css("margin-right" ,bianJu);
 }
 });


</script>

</head>

<body>



</body>

</html>