分享一個可以讓DIV實現(xiàn)居中齊的方法
分享 2012.03.23 瀏覽次數(shù):8326次
無意中在網(wǎng)站看到一屬性可以讓一個DIV實現(xiàn)居中,個人覺得很好,想起以前自己學(xué)習(xí)CSS時候也曾經(jīng)接觸過實現(xiàn)DIV居中的方法,看過css徹底研究一本書,中講到用三個DIV的方式,實現(xiàn)代碼長,代碼不易理解,現(xiàn)在想想,時代的變化真快!下面就分享一下,用vertical-align:middle可以很簡單地解決。
就以一個404頁面為例,看如何讓一張圖片相對于整個頁面居中,如下圖:
這是一個404頁面,里面就只有一張圖片,點擊圖片可以回到首頁,而且這個圖片是相對于整個頁面居中的,無論是水平還是垂直。
接下來看一下它的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頁面title> 6head> 7<body> 8<div class="wall"> 9<a href="index.html"><img class="img404" src="images/404.jpg" alt="404頁面"/>a> 10div> 11body> 12html>
代碼很簡單,就一個class="wall"的div標簽,一個a標簽,一個class=“img404”的img標簽。
接下來就是寫css了,先讓class="wall"的div的寬和高都為100%,以填充整個頁面,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里面值得一說的恐怕就是為什么要用絕對定位(position:absolute)以及_height:100%這個樣式了;我試了很多方法,結(jié)果我只能用絕對定位才能讓它的height:100%生效,當然固定定位(position:fixed)也是可以的,可是IE6不支持;_height:100%是為了兼容IE6,讓class="wall"的div在IE6里也能高度為100%。如果想驗證一下class="wall"的div現(xiàn)在是否已經(jīng)填充了整個頁面,不妨在.wall里面設(shè)一個背景色就可以知道了,這里我就不做實驗了。
目前整頁的代碼如下:
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頁面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頁面"/>a>
15div>
16body>
17html>
效果如下:
接下來就利用vertical-align:middle來實現(xiàn)垂直居中了,因為class="wall"的div填充了整個頁面,所以只要讓圖片在class="wall"的div里面垂直居中就達到目的了。以前總是以為vertical-align與text-align是同樣的道理,一個是垂直居中,一個是水平居中,只要給class="wall"的div加上一個vertical-align:middle就能讓圖片垂直居中,結(jié)果一點效果也沒有。事實上vertical-align與text-align完全不一樣,給class="wall"的div加上一個text-align:center的話,毫無疑問是可以讓里面的img水平居中,但vertical-align卻不能這樣子用。
先看一下W3C上對vertical-align的定義:vertical-align 屬性設(shè)置元素的垂直對齊方式。該屬性定義行內(nèi)元素的基線相對于該元素所在行的基線的垂直對齊。允許指定負長度值和百分比值。這會使元素降低而不是升高。在表單元格中,這個屬性會設(shè)置單元格框中的單元格內(nèi)容的對齊方式。
必須承認這句話我看了很久才看懂說的是神馬意思,我的理解是它有兩種用法:
第一種用法,先看后面一句“在表單元格中,這個屬性會設(shè)置單元格框中的單元格內(nèi)容的對齊方式。”這很容易理解,如果給一個表格的td加一個vertical-align:middle的樣式,表格里面的內(nèi)容會垂直居中,同樣的如果給一個vertical-align:bottom就會底部對齊,如果給一個vertical-align:top就會頂部對齊。
第二種用法,看前頁一句“該屬性定義行內(nèi)元素的基線相對于該元素所在行的基線的垂直對齊。”專業(yè)的語言我不會說的,可以打個比喻:假設(shè)有兩個行內(nèi)元素a和b,a和b都是img,當a加了一個vertical-align:middle樣式之后,b的底部(基線)就會對齊a的中間位置,如下圖:
如果a和b都加了一個vertical-align:middle樣式,那么就互相對齊了對方的中間位置,也就是它們在垂直方向上的中線對齊了,如下圖:
說到這里,思路就清晰了(PS:理應(yīng)知道vertical-align可以設(shè)middle,top,bottom等等,甚至可以設(shè)置具體的值或百分比,如果想知道會有怎樣的效果,可以自己實驗一下,這里就不多說了。)。
接下來回到這篇文章的主題,現(xiàn)在我要讓class="img404"的img在class="wall"的div里面垂直居中,我可以在div里面加一個span空標簽,把它的高度設(shè)為100%,再給它一個vertical-align:middle樣式,同樣地給img一個vertical-align:middle樣式,那么img就可以在div里面垂直居中了。如圖:
按照這個思路,完整的頁面代碼就出來了:
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頁面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頁面"/>a>
17div>
18body>
19html>
以上的CSS里面值得一提的是.verticalAlign,加一個display:inline-block是為了觸發(fā)它的layout,以讓本來沒有l(wèi)ayout的span可以設(shè)置寬和高,margin-left:-1px是為了讓span左移一個像素,而令img在水平方向上回到正中位置;另外.wall里面的font-size:0正如我上一篇文章所說的是為了消除代碼換行所造成的空隙。
最終效果如下:
杭州網(wǎng)站建設(shè) 相關(guān)閱讀:如何用opener hack方式實現(xiàn)IE6,7完美跨域
-
杭州網(wǎng)站設(shè)計公司:品牌網(wǎng)站開發(fā)助力企業(yè)成長
日期:2024-12-20瀏覽次數(shù):354次
-
杭州網(wǎng)站建設(shè)公司:商城網(wǎng)站建設(shè)的六大關(guān)鍵步驟
日期:2024-12-18瀏覽次數(shù):444次
-
杭州網(wǎng)站制作:醫(yī)院網(wǎng)站設(shè)計與域名備案的復(fù)雜性探討
日期:2024-12-18瀏覽次數(shù):461次
-
杭州網(wǎng)站制作公司:打造安全可靠的醫(yī)院網(wǎng)站
日期:2024-12-11瀏覽次數(shù):700次
-
杭州網(wǎng)站設(shè)計公司:數(shù)據(jù)庫在高端網(wǎng)站制作中的關(guān)鍵作用
日期:2024-12-11瀏覽次數(shù):671次
相關(guān)新聞
整合同類新聞,相關(guān)新聞一手掌握
-
伊春網(wǎng)頁設(shè)計,要了解的基礎(chǔ)常識有哪些?
日期:2023-02-21瀏覽次數(shù):1552次
-
伊春公司的網(wǎng)站排名怎么做
日期:2023-02-21瀏覽次數(shù):1514次
-
伊春網(wǎng)站制作的主要步驟有哪些
日期:2023-02-21瀏覽次數(shù):1525次
-
伊春企業(yè)的,網(wǎng)站用戶來自哪里?
日期:2023-02-21瀏覽次數(shù):1507次
-
伊春做網(wǎng)站建設(shè)找哪家好?
日期:2023-02-21瀏覽次數(shù):1511次
最新新聞
與互聯(lián)網(wǎng)同行,實時掌握網(wǎng)建行業(yè)最新動態(tài)
-
小程序?qū)I銷推廣有哪些優(yōu)勢
日期:2019-11-05瀏覽次數(shù):4894次
-
杭州定制app是如何提升用戶活躍度的?
日期:2020-08-10瀏覽次數(shù):4156次
-
杭州帷拓科技與浙江省醫(yī)師協(xié)會達成合作關(guān)系
日期:2020-10-30瀏覽次數(shù):5496次
-
杭州網(wǎng)站設(shè)計涉及的諸多內(nèi)容
日期:2021-08-23瀏覽次數(shù):3595次
-
帷拓科技攜手歐盛騰品牌打造官網(wǎng)
日期:2023-10-13瀏覽次數(shù):2485次
隨機新聞
新聞新動態(tài),您需要的新聞管家
洞悉市場趨勢演變讓傳播回歸社會
免費獲取網(wǎng)站建設(shè)與網(wǎng)絡(luò)推廣方案報價
-
關(guān)于我們
杭州帷拓科技有限公司,是一家新型的全案網(wǎng)絡(luò)開發(fā)公司,作為以互聯(lián)網(wǎng)高端網(wǎng)站建設(shè)、APP開發(fā)、小程序開發(fā)為核心的專業(yè)網(wǎng)絡(luò)技術(shù)服務(wù)供應(yīng)商,帷拓科技致力于全面分析市場環(huán)境、衡量與預(yù)測市場需求、整合區(qū)別于行業(yè)競爭對手的絕對優(yōu)勢,結(jié)合品牌理念深度挖掘項目優(yōu)勢和產(chǎn)品價值,提升客戶品牌認知、認可度。
-
我們的客戶
帷拓科技歷經(jīng)十年沉淀,與國內(nèi)外上千家客戶達成合作關(guān)系,其中穩(wěn)定合作的公司有:浙江華為、浙江移動、浙江5G產(chǎn)業(yè)聯(lián)盟、浙江省社科院、綠城足球俱樂部、娃哈哈雙語學(xué)校、健康中國杭州峰會、科雷機電等,帷拓科技始終堅持“帷有專業(yè),才能拓展無限”的服務(wù)理念,堅持“認真堅持細節(jié)”的優(yōu)質(zhì)服務(wù)理念,不斷完善自身,成就企業(yè),最終實現(xiàn)共贏。
-
我們的業(yè)務(wù)
帷拓科技主營業(yè)務(wù)范圍包含互聯(lián)網(wǎng)高端網(wǎng)站建設(shè)、APP開發(fā)、小程序開發(fā)、商城網(wǎng)站建設(shè)、公眾號運營以及數(shù)字營銷等,涵蓋了服務(wù)、房產(chǎn)、數(shù)碼、服裝、物流貿(mào)易等行業(yè),根據(jù)品牌現(xiàn)狀,為每個客戶量身定制項目整體服務(wù)方案,以敏銳的市場洞察力、創(chuàng)新的市場策劃能力,全面把握市場變化,為客戶實現(xiàn)從企業(yè)到消費者的價值轉(zhuǎn)換。