利用vertical-alignmiddle實(shí)現(xiàn)在整個(gè)頁面居中_第1頁
利用vertical-alignmiddle實(shí)現(xiàn)在整個(gè)頁面居中_第2頁
利用vertical-alignmiddle實(shí)現(xiàn)在整個(gè)頁面居中_第3頁
利用vertical-alignmiddle實(shí)現(xiàn)在整個(gè)頁面居中_第4頁
利用vertical-alignmiddle實(shí)現(xiàn)在整個(gè)頁面居中_第5頁
已閱讀5頁，還剩2頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

1、.利用vertical-align:middle實(shí)現(xiàn)在整個(gè)頁面居中 如果想讓一個(gè)div或一張圖片相對于整個(gè)頁面居中，用vertical-align:middle可以很簡單地解決。就以一個(gè)404頁面為例，看如何讓一張圖片相對于整個(gè)頁面居中，如下圖：這是一個(gè)404頁面，里面就只有一張圖片，點(diǎn)擊圖片可以回到首頁，而且這個(gè)圖片是相對于整個(gè)頁面居中的，無論是水平還是垂直（PS：這可算是我做404頁面最為習(xí)慣的一種懶人做法了，越簡單越好，要想好看的話，直接用photoshop做一張好看一點(diǎn)的圖片就好了）。 接下來看一下它的html代碼: 1 <!DOCTYPE html PUBLIC &q

2、uot;-/W3C/DTD XHTML 1.0 Transitional/EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 3 <html xmlns="/1999/xhtml"> 4 <head> 5 <title>404頁面</title> 6 </head> 7 <body> 8 <div class="wall"> 9

3、<a href="index.html"><img class="img404" src="images/404.jpg" alt="404頁面" /></a>10 </div>11 </body>12 </html>復(fù)制代碼代碼很簡單，就一個(gè)class="wall"的div標(biāo)簽，一個(gè)a標(biāo)簽，一個(gè)class=“img404”的img標(biāo)簽。 接下來就是寫css了，先讓class="wall"的di

4、v的寬和高都為100%，以填充整個(gè)頁面，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;5 </style>復(fù)制代碼以上CSS里面值得一說的恐怕就是為什么要用絕對定位（position:absolute）以及_hei

5、ght:100%這個(gè)樣式了；我試了很多方法，結(jié)果我只能用絕對定位才能讓它的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è)頁面，不妨在.wall里面設(shè)一個(gè)背景色就可以知道了，這里我就不做實(shí)驗(yàn)了。 目前整頁的代碼如下： 1 <!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0

6、 Transitional/EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 3 <html xmlns="/1999/xhtml"> 4 <head> 5 <title>404頁面</title> 6 <style type="text/css"> 7 body margin:0; background:#333; _height:100%; 8 .

7、wall width:100%; height:100%; position:absolute; left:0; top:0; text-align:center; 9 .img404 border:0; width:700px;10 </style>11 </head>12 <body>13 <div class="wall">14 <a href="index.html"><img class="img404" src="images/404.jpg&qu

8、ot; alt="404頁面" /></a>15 </div>16 </body>17 </html>復(fù)制代碼效果如下： 接下來就利用vertical-align:middle來實(shí)現(xiàn)垂直居中了，因?yàn)閏lass="wall"的div填充了整個(gè)頁面，所以只要讓圖片在class="wall"的div里面垂直居中就達(dá)到目的了。以前總是以為vertical-align與text-align是同樣的道理，一個(gè)是垂直居中，一個(gè)是水平居中，只要給class="wall"

9、;的div加上一個(gè)vertical-align:middle就能讓圖片垂直居中，結(jié)果一點(diǎn)效果也沒有。事實(shí)上vertical-align與text-align完全不一樣，給class="wall"的div加上一個(gè)text-align:center的話，毫無疑問是可以讓里面的img水平居中，但vertical-align卻不能這樣子用。先看一下W3C上對vertical-align的定義：vertical-align 屬性設(shè)置元素的垂直對齊方式。該屬性定義行內(nèi)元素的基線相對于該元素所在行的基線的垂直對齊。允許指定負(fù)長度值和百分比值。這會(huì)使元素降低而不是升高。在表單元格中，這個(gè)屬

10、性會(huì)設(shè)置單元格框中的單元格內(nèi)容的對齊方式。必須承認(rèn)這句話我看了很久才看懂說的是神馬意思，我的理解是它有兩種用法：第一種用法，先看后面一句“在表單元格中，這個(gè)屬性會(huì)設(shè)置單元格框中的單元格內(nèi)容的對齊方式?！边@很容易理解，如果給一個(gè)表格的td加一個(gè)vertical-align:middle的樣式，表格里面的內(nèi)容會(huì)垂直居中，同樣的如果給一個(gè)vertical-align:bottom就會(huì)底部對齊，如果給一個(gè)vertical-align:top就會(huì)頂部對齊。第二種用法，看前頁一句“該屬性定義行內(nèi)元素的基線相對于該元素所在行的基線的垂直對齊?！睂I(yè)的語言我不會(huì)說的，可以打個(gè)比喻：假設(shè)有兩個(gè)行內(nèi)元素a和b，a

11、和b都是img，當(dāng)a加了一個(gè)vertical-align:middle樣式之后，b的底部（基線）就會(huì)對齊a的中間位置，如下圖：如果a和b都加了一個(gè)vertical-align:middle樣式，那么就互相對齊了對方的中間位置，也就是它們在垂直方向上的中線對齊了，如下圖：說到這里，思路就清晰了（PS：理應(yīng)知道vertical-align可以設(shè)middle,top,bottom等等，甚至可以設(shè)置具體的值或百分比，如果想知道會(huì)有怎樣的效果，可以自己實(shí)驗(yàn)一下，這里就不多說了。）。接下來回到這篇文章的主題，現(xiàn)在我要讓class="img404"的img在class="wal

12、l"的div里面垂直居中，我可以在div里面加一個(gè)span空標(biāo)簽，把它的高度設(shè)為100%，再給它一個(gè)vertical-align:middle樣式，同樣地給img一個(gè)vertical-align:middle樣式，那么img就可以在div里面垂直居中了。如圖：按照這個(gè)思路，完整的頁面代碼就出來了： 1 <!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">

13、 2 3 <html xmlns="/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:

14、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;11 </style>12 </head>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>17 </div>18 </body>19 </html&g

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論