免费亚洲欧美精品电影_国内精品偷拍福利视频_美女黄网站色视免费国产_国产不卡福利片在线观看

24小時(shí)咨詢(xún)電話:0571-88023217云浮網(wǎng)站建設(shè)公司 10年專(zhuān)業(yè)網(wǎng)絡(luò)服務(wù)供應(yīng)商

資訊中心

- 直擊網(wǎng)站建設(shè)第一現(xiàn)場(chǎng),掌握全球化的消息 -

當(dāng)前位置 : 首頁(yè) > 資訊中心 > 分享一個(gè)可以讓DIV實(shí)現(xiàn)居中齊的方法

分享一個(gè)可以讓DIV實(shí)現(xiàn)居中齊的方法

分享 2012.03.23 瀏覽次數(shù):8322次

      無(wú)意中在網(wǎng)站看到一屬性可以讓一個(gè)DIV實(shí)現(xiàn)居中,個(gè)人覺(jué)得很好,想起以前自己學(xué)習(xí)CSS時(shí)候也曾經(jīng)接觸過(guò)實(shí)現(xiàn)DIV居中的方法,看過(guò)css徹底研究一本書(shū),中講到用三個(gè)DIV的方式,實(shí)現(xiàn)代碼長(zhǎng),代碼不易理解,現(xiàn)在想想,時(shí)代的變化真快!下面就分享一下,用vertical-align:middle可以很簡(jiǎn)單地解決。

       就以一個(gè)404頁(yè)面為例,看如何讓一張圖片相對(duì)于整個(gè)頁(yè)面居中,如下圖:

         這是一個(gè)404頁(yè)面,里面就只有一張圖片,點(diǎn)擊圖片可以回到首頁(yè),而且這個(gè)圖片是相對(duì)于整個(gè)頁(yè)面居中的,無(wú)論是水平還是垂直。

 

接下來(lái)看一下它的html代碼:

 1DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2
 3<html xmlns="http://www.w3.org/1999/xhtml">
 4<head>
 5<title>404頁(yè)面title>
 6head>
 7<body>
 8<div class="wall">
 9<a href="index.html"><img class="img404" src="images/404.jpg" alt="404頁(yè)面"/>a>
10div>
11body>
12html>
 

代碼很簡(jiǎn)單,就一個(gè)class="wall"的div標(biāo)簽,一個(gè)a標(biāo)簽,一個(gè)class=“img404”的img標(biāo)簽。

 

接下來(lái)就是寫(xiě)css了,先讓class="wall"的div的寬和高都為100%,以填充整個(gè)頁(yè)面,CSS如下:

1<style type="text/css">
2        body{ margin:0; background:#333; _height:100%;}
3        .wall{ width:100%; height:100%; position:absolute; left:0; top:0; text-align:center;}
4        .img404{ border:0;width:700px;}
5style>
 

以上CSS里面值得一說(shuō)的恐怕就是為什么要用絕對(duì)定位(position:absolute)以及_height:100%這個(gè)樣式了;我試了很多方法,結(jié)果我只能用絕對(duì)定位才能讓它的height:100%生效,當(dāng)然固定定位(position:fixed)也是可以的,可是IE6不支持;_height:100%是為了兼容IE6,讓class="wall"的div在IE6里也能高度為100%。如果想驗(yàn)證一下class="wall"的div現(xiàn)在是否已經(jīng)填充了整個(gè)頁(yè)面,不妨在.wall里面設(shè)一個(gè)背景色就可以知道了,這里我就不做實(shí)驗(yàn)了。

 

目前整頁(yè)的代碼如下:

 1DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2
 3<html xmlns="http://www.w3.org/1999/xhtml">
 4<head>
 5<title>404頁(yè)面title>
 6<style type="text/css">
 7        body{ margin:0; background:#333; _height:100%;}
 8        .wall{ width:100%; height:100%; position:absolute; left:0; top:0; text-align:center;}
 9        .img404{ border:0; width:700px;}
10style>
11head>
12<body>
13<div class="wall">
14<a href="index.html"><img class="img404" src="images/404.jpg" alt="404頁(yè)面"/>a>
15div>
16body>
17html>
 

效果如下:

 

接下來(lái)就利用vertical-align:middle來(lái)實(shí)現(xiàn)垂直居中了,因?yàn)閏lass="wall"的div填充了整個(gè)頁(yè)面,所以只要讓圖片在class="wall"的div里面垂直居中就達(dá)到目的了。以前總是以為vertical-align與text-align是同樣的道理,一個(gè)是垂直居中,一個(gè)是水平居中,只要給class="wall"的div加上一個(gè)vertical-align:middle就能讓圖片垂直居中,結(jié)果一點(diǎn)效果也沒(méi)有。事實(shí)上vertical-align與text-align完全不一樣,給class="wall"的div加上一個(gè)text-align:center的話,毫無(wú)疑問(wèn)是可以讓里面的img水平居中,但vertical-align卻不能這樣子用。

先看一下W3C上對(duì)vertical-align的定義:vertical-align 屬性設(shè)置元素的垂直對(duì)齊方式。該屬性定義行內(nèi)元素的基線相對(duì)于該元素所在行的基線的垂直對(duì)齊。允許指定負(fù)長(zhǎng)度值和百分比值。這會(huì)使元素降低而不是升高。在表單元格中,這個(gè)屬性會(huì)設(shè)置單元格框中的單元格內(nèi)容的對(duì)齊方式。

必須承認(rèn)這句話我看了很久才看懂說(shuō)的是神馬意思,我的理解是它有兩種用法:

第一種用法,先看后面一句“在表單元格中,這個(gè)屬性會(huì)設(shè)置單元格框中的單元格內(nèi)容的對(duì)齊方式。”這很容易理解,如果給一個(gè)表格的td加一個(gè)vertical-align:middle的樣式,表格里面的內(nèi)容會(huì)垂直居中,同樣的如果給一個(gè)vertical-align:bottom就會(huì)底部對(duì)齊,如果給一個(gè)vertical-align:top就會(huì)頂部對(duì)齊。

第二種用法,看前頁(yè)一句“該屬性定義行內(nèi)元素的基線相對(duì)于該元素所在行的基線的垂直對(duì)齊。”專(zhuān)業(yè)的語(yǔ)言我不會(huì)說(shuō)的,可以打個(gè)比喻:假設(shè)有兩個(gè)行內(nèi)元素a和b,a和b都是img,當(dāng)a加了一個(gè)vertical-align:middle樣式之后,b的底部(基線)就會(huì)對(duì)齊a的中間位置,如下圖:

如果a和b都加了一個(gè)vertical-align:middle樣式,那么就互相對(duì)齊了對(duì)方的中間位置,也就是它們?cè)诖怪狈较蛏系闹芯€對(duì)齊了,如下圖:

說(shuō)到這里,思路就清晰了(PS:理應(yīng)知道vertical-align可以設(shè)middle,top,bottom等等,甚至可以設(shè)置具體的值或百分比,如果想知道會(huì)有怎樣的效果,可以自己實(shí)驗(yàn)一下,這里就不多說(shuō)了。)。

接下來(lái)回到這篇文章的主題,現(xiàn)在我要讓class="img404"的img在class="wall"的div里面垂直居中,我可以在div里面加一個(gè)span空標(biāo)簽,把它的高度設(shè)為100%,再給它一個(gè)vertical-align:middle樣式,同樣地給img一個(gè)vertical-align:middle樣式,那么img就可以在div里面垂直居中了。如圖:

按照這個(gè)思路,完整的頁(yè)面代碼就出來(lái)了:

 1DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2
 3<html xmlns="http://www.w3.org/1999/xhtml">
 4<head>
 5<title>404頁(yè)面title>
 6<style type="text/css">
 7         body{ margin:0; background:#333; _height:100%;}
 8         .wall{ width:100%; height:100%; position:absolute; left:0; top:0; text-align:center; font-size:0;}
 9         .img404{ border:0; width:700px; vertical-align:middle;}
10         .verticalAlign{ vertical-align:middle; display:inline-block; height:100%; width:1px; margin-left:-1px;}
11style>
12head>
13<body>
14<div class="wall">
15<span class="verticalAlign">span>
16<a href="index.html"><img class="img404" src="images/404.jpg" alt="404頁(yè)面"/>a>
17div>
18body>
19html>
 

以上的CSS里面值得一提的是.verticalAlign,加一個(gè)display:inline-block是為了觸發(fā)它的layout,以讓本來(lái)沒(méi)有l(wèi)ayout的span可以設(shè)置寬和高,margin-left:-1px是為了讓span左移一個(gè)像素,而令img在水平方向上回到正中位置;另外.wall里面的font-size:0正如我上一篇文章所說(shuō)的是為了消除代碼換行所造成的空隙。

最終效果如下:

杭州網(wǎng)站建設(shè)  相關(guān)閱讀:如何用opener hack方式實(shí)現(xiàn)IE6,7完美跨域

 

最新網(wǎng)站案例

洞悉市場(chǎng)趨勢(shì)演變讓傳播回歸社會(huì)

    免費(fèi)獲取網(wǎng)站建設(shè)與網(wǎng)絡(luò)推廣方案報(bào)價(jià)

    • 關(guān)于我們

      杭州帷拓科技有限公司,是一家新型的全案網(wǎng)絡(luò)開(kāi)發(fā)公司,作為以互聯(lián)網(wǎng)高端網(wǎng)站建設(shè)、APP開(kāi)發(fā)、小程序開(kāi)發(fā)為核心的專(zhuān)業(yè)網(wǎng)絡(luò)技術(shù)服務(wù)供應(yīng)商,帷拓科技致力于全面分析市場(chǎng)環(huán)境、衡量與預(yù)測(cè)市場(chǎng)需求、整合區(qū)別于行業(yè)競(jìng)爭(zhēng)對(duì)手的絕對(duì)優(yōu)勢(shì),結(jié)合品牌理念深度挖掘項(xiàng)目?jī)?yōu)勢(shì)和產(chǎn)品價(jià)值,提升客戶(hù)品牌認(rèn)知、認(rèn)可度。

    • 我們的客戶(hù)

      帷拓科技?xì)v經(jīng)十年沉淀,與國(guó)內(nèi)外上千家客戶(hù)達(dá)成合作關(guān)系,其中穩(wěn)定合作的公司有:浙江華為、浙江移動(dòng)、浙江5G產(chǎn)業(yè)聯(lián)盟、浙江省社科院、綠城足球俱樂(lè)部、娃哈哈雙語(yǔ)學(xué)校、健康中國(guó)杭州峰會(huì)、科雷機(jī)電等,帷拓科技始終堅(jiān)持“帷有專(zhuān)業(yè),才能拓展無(wú)限”的服務(wù)理念,堅(jiān)持“認(rèn)真堅(jiān)持細(xì)節(jié)”的優(yōu)質(zhì)服務(wù)理念,不斷完善自身,成就企業(yè),最終實(shí)現(xiàn)共贏。

    • 我們的業(yè)務(wù)

      帷拓科技主營(yíng)業(yè)務(wù)范圍包含互聯(lián)網(wǎng)高端網(wǎng)站建設(shè)、APP開(kāi)發(fā)、小程序開(kāi)發(fā)、商城網(wǎng)站建設(shè)、公眾號(hào)運(yùn)營(yíng)以及數(shù)字營(yíng)銷(xiāo)等,涵蓋了服務(wù)、房產(chǎn)、數(shù)碼、服裝、物流貿(mào)易等行業(yè),根據(jù)品牌現(xiàn)狀,為每個(gè)客戶(hù)量身定制項(xiàng)目整體服務(wù)方案,以敏銳的市場(chǎng)洞察力、創(chuàng)新的市場(chǎng)策劃能力,全面把握市場(chǎng)變化,為客戶(hù)實(shí)現(xiàn)從企業(yè)到消費(fèi)者的價(jià)值轉(zhuǎn)換。

    Designerpart Designagentur
    Designerpart Designagentur
    Designerpart Designagentur
    Designerpart Designagentur
    Designerpart Designagentur
    Designerpart Designagentur