茫茫網海中的冷日
         
茫茫網海中的冷日
發生過的事,不可能遺忘,只是想不起來而已!
 恭喜您是本站第 1664602 位訪客!  登入  | 註冊
主選單

Google 自訂搜尋

Goole 廣告

隨機相片
F09_536.jpg

授權條款

使用者登入
使用者名稱:

密碼:


忘了密碼?

現在就註冊!

網頁設計 : [轉貼]只用 CSS 讓圖片在 DIV 中水平垂直都置中

發表者 討論內容
冷日
(冷日)
Webmaster
  • 註冊日: 2008/2/19
  • 來自:
  • 發表數: 15766
[轉貼]只用 CSS 讓圖片在 DIV 中水平垂直都置中

2009-03-02 09:26 只用 CSS 讓圖片在 DIV 中水平垂直都置中

這個問題我很久以前思考過。水平置中當然沒問題, text-align : center 就好了。在 Firefox 和 Chrome 垂直置中也沒啥問題,因為 CSS 支援完整,可以動手腳的地方多。難的是在 IE 垂直置中。之前我想不到好的純 CSS 解法,所以最後我在 img onload 上註冊一個 handler ,動態算出 margin-top ,讓圖片垂直置中。

現在工作上又碰到這個問題,又開始苦思有沒有好的純 CSS 解法。結果在大陸找到這個網頁 - 圖片垂直居中的使用技巧。只能說太神了 m(__ __)m,這種解法我應該一輩子也想不出來吧。老實講我只約略知道為什麼可以這樣解,實際上的原理還是不太懂。

他的方式是抓出特定字型在 IE font-size 和所產生行高的比例,然後就以此比例來算出要垂直置中 font-size 該設多少。他算出來字型 Arial 的比例是 0.873 ,但我算出來約是 0.9 左右。所以要讓一張圖在 IE 高度 200px 的 DIV 中垂直置中就要把 font-family 設為 Arial 、 font-size 設為 200px * 0.9 = 180px 。

再來講講
大陸網頁的 Firefox 部份,他用 display : table-cell 讓圖片在 Firefox 垂直置中,我不太喜歡 :p ,因為這樣 DIV 就不能 float : left 或 float : right 了。所以我想辦法用 div:after 、 line-height 、 white-space : nowrap 兜出了一樣的效果。

下面是我整理出的在 IE 、 Firefox 、 Chrome 都可以跑的範例︰

Demo

HTML


<div><img src="demo.jpg" /></div>

CSS


div {
background-color : #EEE;
height : 200px;
width : 200px;
text-align : center;
/* Firefox, Chrome */
line-height : 200px;
white-space : nowrap;
/* IE */
*font-size : 180px; /* 200px * 0.8 = 180px */
*font-family : Arial;
}
div:after {
content : ".";
font-size : 1px;
margin-left : -1px;
opacity : 0;
}
div img {
vertical-align : middle;
}

 

下面是和 float : left 搭配的 Demo ︰

Firefox 和 Chrome 的部份額外補充兩點︰

  1. 如果你有設定 DOCTYPE ,且 DOCTYPE 是 Strict 模式,那其實 div:after 、 white-space : nowrap 都不用寫,把 line-height 和 DIV 高度設一樣就好了。
  2. div:after 不直接寫 font-size : 0 ,要寫 font-size : 1px 再寫 margin-left : -1px 和 opacity : 0 是因為 Chrome 不支援 font-size : 0 。

重新整理一份 Strict 模式用的 CSS 方便大家參考:


div {
background-color : #EEE;
height : 200px;
width : 200px;
text-align : center;
/* Firefox, Chrome */
line-height : 200px;
/* IE */
*font-size : 180px; /* 200px * 0.8 = 180px */
*font-family : Arial;
}


原文出處:只用 CSS 讓圖片在 DIV 中水平垂直都置中 @ Vexed's Blog :: 隨意窩 Xuite日誌
前一個主題 | 下一個主題 | | | |

討論串




Powered by XOOPS 2.0 © 2001-2008 The XOOPS Project|