18禁黄无遮挡免费网站动漫_日本 欧美 亚洲 另类_91sex国产_免费h在线观看视频网站

天蠶在你身邊

不方便打電話?讓天蠶聯(lián)絡(luò)你

我們存在,我們思索,我們不斷進(jìn)取首頁(yè) >> 資訊 >> 網(wǎng)站建設(shè)行業(yè)新聞
重慶網(wǎng)絡(luò)公司 控制div的水平、垂直同時(shí)居中

創(chuàng)建一個(gè)div的水平居中很簡(jiǎn)單,只需要設(shè)定寬度和左右margin值自動(dòng)。這種方法可以用在block級(jí)元素上(div、圖片、h1等)。如果在inline元素上,必須使用display:block。

.className{

margin:0 auto;

width:200px;

height:200px;

}

css控制div水平、垂直居中

控制div的水平和水質(zhì)居中,比較棘手,你需要預(yù)先知道div的寬度和高度。

首先設(shè)定絕對(duì)定位,這樣可以把元素從周?chē)蛛x出來(lái),相對(duì)于window定位。然后設(shè)定左上居中50%定位,這樣就可以中間了。最后設(shè)定div的左上的定位為負(fù)值,分別為寬高的一半。

.className{

width:300px;

height:200px;

position:absolute;

left:50%;

top:50%;

margin:-100px 0 0 -150px;

}

css+Jquery控制div水平、垂直居中

使用div+css只能是先定了寬高的div水平和垂直居中??纯磈query能做什么。

$(window).resize(function(){

$('.className').css({

position:'absolute',

left: ($(window).width() - $('.className').outerWidth())/2,

top: ($(window).height() - $('.className').outerHeight())/2

});

});

// To initially run the function:

$(window).resize();

其實(shí)模仿的上一種辦法,只是在瀏覽器窗口改變時(shí),動(dòng)態(tài)計(jì)算div的高度和寬度。偷巧的完成了div的寬度和高度計(jì)算。

缺點(diǎn)是必須JavaScript支持。但,其效果非常好,可以用在華麗的用戶界面上。

       重慶網(wǎng)絡(luò)公司


地址:重慶市渝中區(qū)上清寺鑫隆達(dá)B座28-8

郵編:400015

電話:023-63612462

EMAIL:cnjl_net@163.com

渝ICP備09007657號(hào)-6

渝公網(wǎng)安備 50010302000872號(hào)