加入收藏 | 设为首页 | 会员中心 | 我要投稿 湖南网 (https://www.hunanwang.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 业界 > 正文

行使jQuery建设程度和垂直居中的网站

发布时间:2018-08-25 22:40:42 所属栏目:业界 来源:站长网
导读:最近在做一个红酒相干的网站,由于对计划要求较量高,以是做了一个图片感较量强的网站,可是发此刻大 判别率 ,出格是4:3的时辰很稀疏,以是想让网页程度垂直都居中,就是让一个div实现程度和垂直居中,固然好几种方法实现,可是本日先容时我最喜好的要领

最近在做一个红酒相干的网站,由于对计划要求较量高,以是做了一个图片感较量强的网站,可是发此刻大判别率,出格是4:3的时辰很稀疏,以是想让网页程度垂直都居中,就是让一个div实现程度和垂直居中,固然好几种方法实现,可是本日先容时我最喜好的要领,通过css和jQuery实现。

1、通过css实现程度居中: 

Copy to ClipboardLiehuo.Net Codes引用的内容:[www.veryhuo.com] .className{
margin:0 auto;
width:200px;
height:200px;
} 2、通过css实现程度居中和垂直居中
通过css建设一个程度居中和垂直居中的div是一件较量贫困的工作,您必需事先知道其它一个div的尺寸:  Copy to ClipboardLiehuo.Net Codes引用的内容:[www.veryhuo.com] .className{
width:300px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin:-100px 0 0 -150px;
}

3、通过jQuery实现

程度居中和垂直居中前面已经提到过了,css的要领只合用于有牢靠尺寸的div,以是到jQuery施展浸染了:

Copy to ClipboardLiehuo.Net Codes引用的内容:[www.veryhuo.com] $(window).resize(function(){
$('.className').css({
position:'absolute',
left: ($(window).width() - $('.className').outerWidth())/2,
top: ($(window).height() - $('.className').outerHeight())/2
});
});
//初始化函数
$(window).resize();

(编辑:湖南网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    热点阅读