爱学习受.NET

www.icjyw.com 记录开发技术收藏天地
公告信息
www.icjyw.com 记录开发技术收藏天地
文章分类
文章档案
文章
jQuery创建水平和垂直居中的div窗口
2011/8/5 12:22:20
在建立网页布局的时候,我们经常会面临一个问题,就是让一个div实现水平和垂直居中,虽然好几种方式实现,但是今天介绍时我最喜欢的方法,通过css和jQuery实现。
1、通过css实现水平居中:

.className{
 margin
:0 auto;
 width
:200px;
 height
:200px;
}

 

2、通过css实现水平居中和垂直居中

通过css创建一个水平居中和垂直居中的div是一件比较麻烦的事情,您必须事先知道另外一个div的尺寸:

.className{
 width
:300px;
 height
:200px;
 position
:absolute;
 left
:50%;
 top
:50%;
 margin
:-100px 0 0 -150px;
}

3、通过jQuery实现ic交易网水平居中和垂直居中前面已经提到过了,css的方法只适用于有固定尺寸的div,所以到jQuery发挥作用了:
$(window).resize(function(){
 $(
'.className').css({
  position:
'absolute',
  left: ($(window).width() 
- $('.className').outerWidth())/2,
   top: ($(window).height() - $('.className').outerHeight())/2 + $(document).scrollTop()
 });
});
//初始化函数
$(window).resize();

 

 

这种方法的好处是您无需知道div有多大,缺点是它只能通过JavaScript实现。

新浪微博粉丝精灵,刷粉丝、刷评论、刷转发、企业商家微博营销必备工具"
 MyQBlog   浏览(2537)   评论(0)   关键字
  
Copyright © 2010-2020 power by CYQ.Blog - 秋色园 v2.0 All Rights Reserved