利用vertical-align:middle實(shí)現(xiàn)在整個(gè)頁(yè)面居中
如果想讓一個(gè)div或一張圖片相對(duì)于整個(gè)頁(yè)面居中，用vertical-align:middle可以很簡(jiǎn)單地解決。
就以一個(gè)404頁(yè)面為例，看如何讓一張圖片相對(duì)于整個(gè)頁(yè)面居中，如下圖：
這是一個(gè)404頁(yè)面，里面就只有一張圖片，點(diǎn)擊圖片可以回到首頁(yè)，而且這個(gè)圖片是相對(duì)于整個(gè)頁(yè)面居中的，無(wú)論是水平還是垂直（PS：這可算是我做404頁(yè)面最為習(xí)慣的一種懶人做法了，越簡(jiǎn)單越好，要想好看的話，直接用photoshop做一張好看一點(diǎn)的圖片就好了～）。
接下來(lái)看一下它的html代碼：
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title>404頁(yè)面</title>
- </head>
- <body>
- <div class="wall">
- <a href="index.html"><img class="img404" src="images/404.jpg" alt="404頁(yè)面" /></a>
- </div>
- </body>
- </html>
代碼很簡(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如下：
- <style type="text/css">
- body{ margin:0; background:#333; _height:100%;}
- .wall{ width:100%; height:100%; position:absolute; left:0; top:0; text-align:center;}
- .img404{ border:0;width:700px;}
- </style>
以上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è)的代碼如下：
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title>404頁(yè)面</title>
- <style type="text/css">
- body{ margin:0; background:#333; _height:100%;}
- .wall{ width:100%; height:100%; position:absolute; left:0; top:0; text-align:center;}
- .img404{ border:0; width:700px;}
- </style>
- </head>
- <body>
- <div class="wall">
- <a href="index.html"><img class="img404" src="images/404.jpg" alt="404頁(yè)面" /></a>
- </div>
- </body>
- </html>
效果如下：
接下來(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ì)齊。”專業(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)了：
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title>404頁(yè)面</title>
- <style type="text/css">
- body{ margin:0; background:#333; _height:100%;}
- .wall{ width:100%; height:100%; position:absolute; left:0; top:0; text-align:center; font-size:0;}
- .img404{ border:0; width:700px; vertical-align:middle;}
- .verticalAlign{ vertical-align:middle; display:inline-block; height:100%; width:1px; margin-left:-1px;}
- </style>
- </head>
- <body>
- <div class="wall">
- <span class="verticalAlign"></span>
- <a href="index.html"><img class="img404" src="images/404.jpg" alt="404頁(yè)面" /></a>
- </div>
- </body>
- </html>
以上的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ō)的是為了消除代碼換行所造成的空隙。
最終效果如下：
（PS：以上僅是個(gè)人理解，如有不同意見(jiàn)，或以上說(shuō)法有錯(cuò)漏，歡迎指出。）
同樣的原理可以實(shí)現(xiàn)文字居中，完整代碼如下：
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title>無(wú)標(biāo)題頁(yè)</title>
- <style type="text/css">
- .wrap{ width:1000px; height:100px; border:solid 1px #999; margin:0 auto; text-align:center;}
- .verticalAlign{ vertical-align:middle; display:inline-block; height:100%; width:1px; margin-left:-1px;}
- .textSpan{vertical-align:middle;}
- </style>
- </head>
- <body>
- <div class="wrap">
- <span class="verticalAlign"></span>
- <span class="textSpan">文字居中</span>
- </div>
- </body>
- </html>
效果如下：
原文鏈接：http://www.cnblogs.com/xueming/archive/2012/03/21/VerticalAlign.html
【編輯推薦】
