通过Javascript,div居中并根据Web页面的大小进行更改。

通过Javascript,div居中并根据Web页面的大小进行更改。
当你用java做后台,你可以登录页面,但页面太丑陋。它应该是居中的,而不是彩色的。然而,不管怎样,你必须使登录框居中。之前的想法是,div是以CSS为中心的,但是现在这个想法已经改变了。Javascript可以简单地使div集中在页面上,并根据网页大小的变化做出相应的更改,只要中间原则很容易实现就可以了。
先看看中间的原理。
先看一幅画。
你在图画里看到了什么可以看出红色的盒子在中间。为什么在中间通过观察,可以看出红盒的蓝间隔线与蓝线相同,从而可以保证垂直对齐。红盒的绿色间隔线也一样,保证了中间层。
但是怎样才能使上下的差距相等呢左右之间的空间是多少
看一幅画。
如果当前页350px高,400px宽,和红框的高度150px,宽度200px,我们可以找到高200px像素高减红框的网页元素,这是200px像素上下利润的总和,利润100px,同样,左、右相同。
你感觉到什么了吗
如果我们知道页面元素的高度或宽度,减去元素的高度或宽度,然后除以2,我们得到上下左右的距离,我们通常如何定位元素不是所有的坐标都是左上角的吗那么红色帧的坐标是什么呢
再看一幅画。
小红盒子的坐标是蓝线100px,和绿色的左线100px,即左上的价值,这两个值不计算
可以归纳出一个公式。
顶部=页面的高页(元素的高度)中间元素的2;
中间元素的左边(网页的宽度-元素的宽度) 2;
转换为Javascript的语法是:
=(document.body.clientheight元。offsetheight) / 2;
左=(document.body.clientwidth元。offsetwidth) / 2
获取顶部和左边的坐标不在中间。
下面是中间的完整代码:
在这里,我们应该注意的几个问题,属性设置绝对位置的元素,即绝对定位,然后加两事件onload和onresize,字符串添加PX,offsetheight是元素本身的采集高,offsetwidth是元素本身的采集范围广,这是当页面加载和调整div将中间。但这中间的元素和一个Web页面的中心,和原理相同,如果你想要一个元素可以在其他的中间。我们只需要改变网页的宽和高代码的其他元素的宽和高代码。另一元素的宽度和高度可以通过获得母公司的高度和宽度的获得落实到当前元素,也可以在中间。如果你使用jQuery框架,代码比较简单。
请注明重印的来源。
免责声明:本网信息来自于互联网,目的在于传递更多信息,并不代表本网赞同其观点。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,并请自行核实相关内容。本站不承担此类作品侵权行为的直接责任及连带责任。如若本网有任何内容侵犯您的权益,请及时联系我们,本站将会在24小时内处理完毕。
相关文章
返回顶部