登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

pcwanli的博客

nx

 
 
 

日志

 
 

DIV居中布局的三大实现方法  

2011-01-17 00:23:23|  分类: CSS |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

你对DIV居中布局的方法是否了解,这里和大家分享一下,因为现在DIV+CSS布局越来越流行了,怎么实现DIV居中好像是个难题。本文给出关于DIV居中布局的几种实现方法,相信会对大家有所帮助。

关于DIV居中布局的几种实现方法

现在DIV+CSS布局越来越流行了,怎么实现DIV居中好像是个难题。本文给出关于DIV居中布局的几种实现方法,相信会对大家有所帮助。

第一种方法:

  1. body{  
  2. margin:0pxauto;  
  3. text-align:center;  

但是如果没申明下面这句解析方法,页面就会出错.不能居中对齐!


  1. "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 

但是有时候页面并不能全部按上面规定的代码格式来编写,比如说要改多彩滚动条.

第二种方法: 

  1.  margin-left:50%;  
  2. left:-width/2; 

这里的width不是CSS中的Width,而是你的DIV的宽度例如你的div是768px宽,那么你就应该设置left:-384px。

第三种方法:使用JS来控制DIV居中.

在页面之中添加了下面的一小段代码.

  1. <scriptlanguagescriptlanguage="javascript"type="text/javascript"src="function.js">script> 

function.js内容:

  1. if(window.screen.width>800){document.write("<styletypestyletype=\"text/css\"> 
  2. body{margin-left:"+(window.screen.width-800)/2+"px}style>");} 

经过测试.可以正常居中

补充一点:上面这段JS必须放在你的最后一个CSS连接或的后面.

◆下面是DIV居中这种方法的详细讲解:

首先解释一下JS中窗口和网页的几种尺寸属性的含义

document.body.clientWidth(网页可见区域宽):是指浏览器显示网页的区域宽度,不包括浏览器的边框宽度和垂直滚动条的宽度。大小随着浏览器的窗口大小而改变。

document.body.clientHeight(网页可见区域高):是指浏览器显示网页的区域所能看到的高度,不包括浏览器的边框宽度和水平滚动条的高度。大小随着浏览器的窗口大小而改变。

document.body.scrollTop(网页被卷去的高):是指拉动垂直滚动条时网页上面被地址栏及菜单栏遮盖着的部分的高。

document.body.scrollLeft(网页被卷去的左):是指拉动水平滚动条时网页左面被左边线遮盖着的部分的宽。

现在我们来分析一下程序该如何实现DIV居中:

◆第一步我们要实现的是使层在弹出时绝对居中不去考虑是否有滚动条的情况。

1.计算出层距离显示区域左边和上边的位置

注意:divId指的是所要居中的层,divId.clientWidth为其宽度!@
vardivId=document.getElementById("xxx");
varv_left=(document.body.clientWidth-divId.clientWidth)/2;
varv_top=(document.body.clientHeight-divId.clientHeight)/2;

2.把得到的值重新赋给DIV的left和top属性

divId.style.left=v_left;
divId.style.top=v_top;
说明:divId为DIV标签的id值
这样这个层就是居中显示的了。

◆第二步我们要实现的是使在拖动滚动条的情况下弹出的层也能居中。

其实很简单我们只要把拖动的宽度和高度加到前面计算出来的左边距和上边距中就OK了。
v_left+=document.body.scrollLeft;
v_top+=document.body.scrollTop;

完整代码如下:

  1. > 
  2. <html> 
  3. <head> 
  4. <title>弹出的层居中显示title> 
  5. <metanamemetaname="generator"content="editplus"> 
  6. <metanamemetaname="author"content=""> 
  7. <metanamemetaname="keywords"content=""> 
  8. <metanamemetaname="description"content=""> 
  9.  
  10. head> 
  11.  
  12. <body> 
  13. <tablewidthtablewidth=100%> 
  14. <tr><td><spanonclickspanonclick="divcenter()">testspan>td>tr> 
  15. <tr><td><spanonclickspanonclick="divcenter()">testspan>td>tr> 
  16. <tr><td><spanonclickspanonclick="divcenter()">testspan>td>tr> 
  17. <tr><td><spanonclickspanonclick="divcenter()">testspan>td>tr> 
  18. <tr><td><spanonclickspanonclick="divcenter()">testspan>td>tr> 
  19. <tr><td><spanonclickspanonclick="divcenter()">testspan>td>tr> 
  20. table> 
  21. <dividdivid=mxhstyle="position:absolute;left:200px;top:30px;width:200px;height:200px;  
  22. background-color:navy;border:2px">我是居中显示的了。div> 
  23. body> 
  24. html> 
  25.  

总结一下:

主要是这句代码起的作用:(window.screen.width-800)/2//计算页面应该留出的边距数值.800为我的DIV宽度+滚动条宽度.实际应用改为你自己的大小.
  评论这张
 
阅读(715)| 评论(0)

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018