实现DIV居中布局三种途径(转)

DIV+CSS布局有很多值得学习的地方，这里和大家描述一下关于DIV居中布局的实现方法，主要有三种方法，每种方法都有各自的特点，请看下文详细介绍，相信通过本文描述你对DIV居中布局一定会有深刻的认识。

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

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

第一种方法:

body{
margin:0pxauto;
text-align:center;
}

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

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.1//EN"  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

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

第二种方法:

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

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

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

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

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

function.js内容:

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

经过测试.可以正常实现DIV居中

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

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

首先解释一下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值，这样这个层就是DIV居中显示的了。

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

1.其实很简单我们只要把拖动的宽度和高度加到前面计算出来的左边距和上边距中就OK了。

v_left+=document.body.scrollLeft;
v_top+=document.body.scrollTop;

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

divId.style.left＝v_left;
divId.style.top=v_top;

这样显示出来就是DIV居中的了。

完整代码如下：

<!doctypehtmlpublic“-//w3c//dtdhtml4.0transitional//en">
<html>
<head>
<title>弹出的层居中显示</title>
<metanamemetaname="generator"content="editplus">
<metanamemetaname="author"content="">
<metanamemetaname="keywords"content="">
<metanamemetaname="description"content=""> </head>
<body>
<tablewidthtablewidth=100%>
<tr><td><spanonclickspanοnclick="divcenter()">test</span></td></tr>
<tr><td><spanonclickspanοnclick="divcenter()">test</span></td></tr>
<tr><td><spanonclickspanοnclick="divcenter()">test</span></td></tr>
<tr><td><spanonclickspanοnclick="divcenter()">test</span></td></tr>
<tr><td><spanonclickspanοnclick="divcenter()">test</span></td></tr>
<tr><td><spanonclickspanοnclick="divcenter()">test</span></td></tr>
</table>
<dividdivid=mxhstyle="position:absolute;
left:200px;top:30px;width:200px;height:200px;
background-color:navy;border:2px">我是居中显示的了。</div>
</body>
</html>

总结一下:

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

转载于:https://www.cnblogs.com/KevinG/p/3533375.html

实现DIV居中布局三种途径(转)相关推荐

html div 居中心,CSS实现DIV居中的三种方法
下面给大家分享div居中的实现代码,具体代码如下所示: demo .div1{ width: 100px; height: 100px; border: 1px solid #000000;} .di ...
css居中的几种办法,CSS div居中的几种方法
CSS实现div垂直居中的方法有很多,下面div居中的几种方法是自己平时写网页中经常用到的,最常见的例子就是登录注册弹出框. 方法一:对div使用绝对布局position:absolute;并设置to ...
Android音乐播放器的获取数据的三种途径
安卓简易播放器获取数据的三种途径: 1.应用自带数据 2.手机内存卡 3.网络数据那我们来看看第一种途径: 一.应用自带数据 1.首先要创建一个播放应用类MediaPlayer有一个create的方 ...
三种途径助物联网改变业务省心省时省成本
最近几年,物联网一直在蓬勃发展,如今也变得更加现实.更有意义,而不再是此前只在业界流传的空洞时髦术语. 很难想像会出现这样的一个世界:在这样的世界里,用户的牙刷会告诉用户在刷牙时没有刷到哪一颗牙齿,或 ...
iOS用三种途径实现一方法有多个返回值
以前觉得这种标题有点偏向于理论,实际开发中怎么会有这种诡异的需求,但是真正遇到了这种硬需求时觉得还是有那么点价值的,理论付诸了实践在此也就做了个整理. 以我私下开发中的一处代码为例,本意是希望有这么一 ...
相对定位绝对定位固定定位粘性定位居中的三种方法 calc函数标签的使用方法
相对定位绝对定位固定定位粘性定位居中的三种方法 calc函数标签的使用方法一.相对定位:position:relative; 二.绝对定位:position:absolute; 1.找参照物 ...
抖音大咖如何寻找广告主？这三种途径值得了解
抖音大咖如何寻找广告主?抖音用户经过自己的努力,终于成为拥有众多粉丝的抖音大咖.之后,抖音大咖可以利用自身巨大的流量获取利益.接广告就是一种获取利益的方法.而接广告的前提是找到广告主,因此,如何寻找广 ...
1、计算机可以解决问题的三种途径
1.计算机可以解决问题的三种途径: 2.基于软件的问题求解方法是指在用现有的软件解决自己的问题,用对应的软件解决特定的问题,如下: 3.基于程序的问题求解方法是指通过编写程序来解决的问题,而这个问 ...
让图片在div里居中（三种方法）
问题当我们将一张 img 放在一个 div 里的时候,具有超高审美的我们,硬是要将 img 居中于 div.所以,产什么以下解决方法. 解决方法布局文件代码 <div class=&quo ...

实现DIV居中布局三种途径(转)

实现DIV居中布局三种途径(转)相关推荐

最新文章

热门文章