利用vertical-align:middle實現(xiàn)在整個頁面居中

作者：學明 2012-03-31 10:22:43

如果想讓一個div或一張圖片相對于整個頁面居中，用vertical-align:middle可以很簡單地解決。就以一個404頁面為例，看如何讓一張圖片相對于整個頁面居中。

如果想讓一個div或一張圖片相對于整個頁面居中，用vertical-align:middle可以很簡單地解決。

就以一個404頁面為例，看如何讓一張圖片相對于整個頁面居中，如下圖：

這是一個404頁面，里面就只有一張圖片，點擊圖片可以回到首頁，而且這個圖片是相對于整個頁面居中的，無論是水平還是垂直（PS：這可算是我做404頁面最為習慣的一種懶人做法了，越簡單越好，要想好看的話，直接用photoshop做一張好看一點的圖片就好了～）。

接下來看一下它的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頁面</title> 
 </head> 
 <body> 
     <div class="wall"> 
         <a href="index.html"><img class="img404" src="images/404.jpg" alt="404頁面" /></a> 
     </div> 
 </body> 
 </html>

代碼很簡單，就一個class="wall"的div標簽，一個a標簽，一個class=“img404”的img標簽。

接下來就是寫css了，先讓class="wall"的div的寬和高都為100%，以填充整個頁面，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里面值得一說的恐怕就是為什么要用絕對定位（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里面設一個背景色就可以知道了，這里我就不做實驗了。

目前整頁的代碼如下：

<!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頁面</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頁面" /></a> 
     </div> 
 </body> 
 </html>

效果如下：

接下來就利用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 屬性設置元素的垂直對齊方式。該屬性定義行內(nèi)元素的基線相對于該元素所在行的基線的垂直對齊。允許指定負長度值和百分比值。這會使元素降低而不是升高。在表單元格中，這個屬性會設置單元格框中的單元格內(nèi)容的對齊方式。

必須承認這句話我看了很久才看懂說的是神馬意思，我的理解是它有兩種用法：

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

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

如果a和b都加了一個vertical-align:middle樣式，那么就互相對齊了對方的中間位置，也就是它們在垂直方向上的中線對齊了，如下圖：

說到這里，思路就清晰了（PS：理應知道vertical-align可以設middle,top,bottom等等，甚至可以設置具體的值或百分比，如果想知道會有怎樣的效果，可以自己實驗一下，這里就不多說了。）。

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

按照這個思路，完整的頁面代碼就出來了：

<!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頁面</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頁面" /></a> 
      </div> 
  </body> 
  </html>

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

最終效果如下：

（PS：以上僅是個人理解，如有不同意見，或以上說法有錯漏，歡迎指出。）

同樣的原理可以實現(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>無標題頁</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

【編輯推薦】

由布局學習CSS：從CSS sprites重視background
淺談Web自動化測試原理
手機WEBKIT引擎HTML元素定位和事例
Node.js vs Opa: Web框架殺手
設計好脾氣的Web頁面

責任編輯：林師授來源：學明的博客

DIV CSS

成人免费xxxxx在线视频软件_久久精品久久久_亚洲国产精品久久久_天天色天天色_亚洲人成一区_欧美一级欧美三级在线观看

利用vertical-align:middle實現(xiàn)在整個頁面居中