您當(dāng)前位置：首頁 > web前端 > jquery > 使用jQuery創(chuàng)建水平和垂直居中的網(wǎng)站

使用jQuery創(chuàng)建水平和垂直居中的網(wǎng)站

來源：程序員人生發(fā)布時(shí)間：2014-01-03 08:59:20 閱讀次數(shù)：6113次

最近在做一個(gè)紅酒相關(guān)的網(wǎng)站，因?yàn)閷?duì)設(shè)計(jì)要求比較高，所以做了一個(gè)圖片感比較強(qiáng)的網(wǎng)站，但是發(fā)現(xiàn)在大分辨率，特別是4:3的時(shí)候很奇怪，所以想讓網(wǎng)頁水平垂直都居中，就是讓一個(gè)div實(shí)現(xiàn)水平和垂直居中，雖然好幾種方式實(shí)現(xiàn)，但是今天介紹時(shí)我最喜歡的方法，通過css和jQuery實(shí)現(xiàn)。 vｅｒｙhuo.com

1、通過css實(shí)現(xiàn)水平居中：網(wǎng)

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

2、通過css實(shí)現(xiàn)水平居中和垂直居中
通過css創(chuàng)建一個(gè)水平居中和垂直居中的div是一件比較麻煩的事情，您必須事先知道另外一個(gè)div的尺寸：

.className{ ｌiｅｈｕo．ｎｅｔ
width:300px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin:-100px 0 0 -150px;
}

3、通過jQuery實(shí)現(xiàn)

ｌiｅｈｕｏ．nｅｔ

水平居中和垂直居中前面已經(jīng)提到過了，css的方法只適用于有固定尺寸的div，所以到j(luò)Query發(fā)揮作用了：ｌiｅｈｕｏ.ｎｅｔ

$(window).resize(function(){
$('.className').css({
position:'absolute',
left: ($(window).width() - $('.className').outerWidth())/2,
top: ($(window).height() - $('.className').outerHeight())/2
});
});
//初始化函數(shù)
$(window).resize();

生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)
程序員人生

日本搞逼视频_黄色一级片免费在线观看_色99久久_性明星video另类hd_欧美77_综合在线视频

使用jQuery創(chuàng)建水平和垂直居中的網(wǎng)站