[CSS] 圖片垂直置中的 css hack

看板Web_Design作者JYHuang (夏天到了，冷不起來了說)時間16年前 (2009/01/20 18:57)推噓4(4推 0噓 1→)

留言5則, 5人參與討論串1/2 (看更多)

相信很多人都遇過想把圖片垂直置中 vertical-align:middle，不管是IE或Fx都沒辦法。而 display:table-cell IE6-也不支援有時只是為了一個圖，還要再加一個<table>標籤也有點麻煩這兩天看見了一個比較方便的css hack 是在圖片外包一個<div>然後透過設定字型的方式來讓圖片垂置 HTML: <div class="box"><img src=".."></div> CSS: .box { height:80px; // 圖片外部元件的高度 width: 80px; 寬 border: solid 1px white; // 這個如果沒設或是尺寸設0px的話，並不會有效果 text-align:center; line-height:80px; // 這兩個數值要照著上面的高度來設定 font-size:80px; // 網路上說的是要設高度*0.837 } .box img { vertical-align:middle; } 上面這個CSS hack衍伸出來的問題 border: solid 1px white; 由於這是必要的所以如果背景有顏色的話一定要跟著背景一起設定也許有些人想到可以用transparent 又很不巧的... IE6不支援border transparent啊 (／‵Д′)／~ ╧╧ 此時在IE6下，border會是黑色線條.. 又去看了一下網路上的CSS hack.. /*set an unused color to be index color*/ //設定border-的顏色 _border-color:tomato; /*For IE6-*/ /*then remove this indexed color*/ _filter:chroma(color=tomato);/*For IE6-*/ //把指定的顏色移除掉這樣看下來似乎一切就OK了 Wait! 還。沒。完........ 上面兩個css hack分開使用都沒問題可是兩個合併使用的話就是沒辦法出現效果囧rz (不過網路上看到的border:transparent就這有這個解) 看來只好把border color跟著背景色設定了 ...(￣ー￣；) 看到browser版在"聊"MS壟斷瀏覽市場的討論一堆人在抱怨IE6.. 想到就有心酸啊就算n年後IE8變成主流，還是一定會有人用IE6這個餘毒啊.. 難道到時還是要針對這群user做 css hack嗎 O.o 後記：最近還有發現JQuery UI的Sortable 在特定情況下會有個滿有趣的現像有空再來Po上來~~ 最後，大家有看到什麼實用的css hack技巧，也麻煩拿出來分享一下吧~ -- ※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 59.104.153.191