文档章节

jQuery制作元素在屏幕中水平垂直居中效果

rin9958
 rin9958
发布于 2016/07/09 21:20
字数 161
阅读 44
收藏 3
jQuery.fn.center = function () {
    this.css("position","absolute");
    this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
    this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
    return this;
}

//Use the above function as:
$(element).center();

另外还有一些其他的实现方法

< !-- html -->
<div id="outer">
  <div id="middle">
    <div id="inner">
    any text <br>
    <b>any height </b><br>
    any content, for example generated from DB <br>
    everything is vertically centered <br>
     </div>
   </div>
</div>

< !-- CSS -->
html{height: 100%;}
body {height: 100%;}
#outer {height: 600px; overflow: visible;width: 100%;position: relative;} /* or without overflow */
#outer[id] {display: table; position: static;}
#middle {position: absolute; top: 50%;} /* for explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; width: 100%;position:static;}
#inner {position: relative; top: -50%} /* for explorer only */
/* optional: #inner[id] {position: static;} */

转载自:http://www.9958.pw/post/jquery_center

© 著作权归作者所有

共有 人打赏支持
rin9958
粉丝 9
博文 113
码字总数 54109
作品 0
程序员
私信 提问
CSS制作水平垂直居中对齐各种方法总结

标签: 杂谈 分类: 网页前端 方法一: 这种方法用来实现单行垂直居中是相当的简单的,你只要保证元素内容是单行,并且其高度是固定不变的,你只要将其“line-height”设置成和“height”值一...

未央花开
2014/04/01
0
0
37个超级棒的 jQuery菜单插件

导航是网站设计最重要的元素之一。一个优秀的导航菜单要简洁易用,方便用户。而用 jQuery 菜单插件制作出来的动态导航则能很好的满足这一点。jQuery 是一个轻量级的 JavaScript 框架,兼容 ...

墙头草
2012/03/22
18.3K
11
分享简单而实用的网页菜单导航【提供源码】

菜单导航对于一个网站来说非常重要,对于浏览者来说,导航设计的好坏将直接影响用户的体验。这里,我们为网页开发者提供了一系列简单但是实用的导航菜单例子及其源码,仅供参考和学习。 CSS3...

tp_wire
2012/06/14
402
1
应用于网站导航中的 15 个 jQuery 插件

当考虑到网页设计时,导航被认为是使网页以用户友好方式展现的一个重要部分。在现代的交互网站中,导航起着至关重要的作用,如果没有正确地处理会影响你网站的访问。适当的导航工具能够帮助用...

oschina
2013/10/15
9.6K
26
10个最实用的个时间轴插件(带详细说明)

建站的时候人人都想把网站建设的更有吸引力,在展示博客、照片、视频等应用上面,使用时间轴的会让你的网站看起来更加的好用,更有点击的欲望。通常这种时间轴的制作成本都不会很低。 但是,...

oschina
2015/03/26
51.1K
13

没有更多内容

加载失败,请刷新页面

加载更多

vue 对对象的属性进行修改时,不能渲染页面 vue.$set()

我在vue里的方法里给一个对象添加某个属性时,我console.log出来的是已经更改的object ,但是页面始终没有变化 原因如下: **受现代 JavaScript 的限制 (而且 Object.observe 也已经被废弃),...

Js_Mei
今天
1
0
开始看《Java学习笔记》

虽然书买了很久,但一直没看。这其中也写过一些Java程序,但都是基于IDE的帮助和对C#的理解来写的,感觉不踏实。 林信良的书写得蛮好的,能够帮助打好基础,看得出作者是比较用心的。 第1章概...

max佩恩
昨天
12
0
Redux 三大原则

1.单一数据源 在传统的MVC架构中,我们可以根据需要创建无数个Model,而Model之间可以互相监听、触发事件甚至循环或嵌套触发事件,这些在Redux中都是不被允许的。 因为在Redux的思想里,一个...

wenxingjun
昨天
8
0
跟我学Spring Cloud(Finchley版)-12-微服务容错三板斧

至此,我们已实现服务发现、负载均衡,同时,使用Feign也实现了良好的远程调用——我们的代码是可读、可维护的。理论上,我们现在已经能构建一个不错的分布式应用了,但微服务之间是通过网络...

周立_ITMuch
昨天
5
0
XML

学习目标  能够说出XML的作用  能够编写XML文档声明  能够编写符合语法的XML  能够通过DTD约束编写XML文档  能够通过Schema约束编写XML文档  能够通过Dom4j解析XML文档 第1章 xm...

stars永恒
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部