Re: [CSS] 圖片垂直置中的 css hack
推一下另一個方法
http://ppt.cc/Uj;h
作法說得很詳細，也有原始參考資料連結
以下是我更動過後的版本
HTML
<dl>
<dt><div><span></span><img src="001.jpg"></div></dt>
<dd><strong>鄉民</strong><br>NT$30CM</dd>
</dl>
<dl>
<dt><div><span></span><img src="002.jpg"></div></dt>
<dd><strong>包龍星</strong><br>NT$300</dd>
</dl>
<dl>
<dt><div><span></span><img src="003.jpg"></div></dt>
<dd><strong>常威</strong><br>NT$3</dd>
</dl>
<dl>
<dt><div><span></span><img src="004.jpg"></div></dt>
<dd><strong>來福</strong><br>NT$3000</dd>
</dl>
CSS
dl{float:left;width:200px;padding:5px;border:1px solid #000;}
dl dt{width:200px;height:150px;}
dl dt div{width:200px;height:150px;display:table-cell;
text-align:center;vertical-align:middle;}
dl dt div *{vertical-align:middle;}
*html dl dt div span{height:100%;display:inline-block;}
*+html dl dt div span{height:100%;display:inline-block;}
dl dt img{max-width:200px;max-height:150px;
width:expression(this.width>200?200:true);
height:expression(this.height>150?150:true);}
上色上的好爛阿(汗~~~)
更改部份
因為不想多設class給文字敘述，所以改用dl dt dd
加上IE7 hack
img給max限制，這個有點多餘，不過以防萬一
再補二個絕對置中的方法，
絕對置中就是不管解析度大小，網頁內容始終保持在瀏覽器中央，
通常我會用在讓全Flash的網頁置中
一、
#wrapper {
position:absolute;
width:400px;
height:300px;
left:50%;
top:50%;
margin:-150px 0 0 -200px; /*值分別為寬高的一半*/
}
利用負邊界來達成，不必加多餘的HTML標籤，也沒用到ie only hack
但是當螢幕解析度低於設置的寬高時，頁面會被切掉一部分(想當然又是suck ie6)
二、
#wrapper {
position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;
*position:relative;
width:800px;
height:600px;
*margin-top:expression((body.clientHeight-600)/2);
*margin-left:expression((body.clientWidth-800)/2);
}
這個是我google資料後自己改的(如有雷同純屬巧合XD)
用expression硬上IE系列，解決了螢幕解析度過低，ie6頁面被腰斬的問題
測試IE系列跟Fx、Gc都沒問題，Op、Safari沒試過....
所以產生其他的問題，本人恕不負責(被痛歐)
--
推
,
推 ：一人一信支持kyork加入SOD
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 125.224.41.88
※ 編輯: kyork 來自: 125.224.41.88 (01/21 15:19)
討論串 (同標題文章)
完整討論串 (本文為第 2 之 2 篇)：
Web_Design 近期熱門文章
PTT數位生活區 即時熱門文章
