|
一天大家在團(tuán)隊(duì)中討論“未知圖片垂直居中”的問(wèn)題，突發(fā)奇想用vertical-align:middle這個(gè)屬性來(lái)實(shí)現(xiàn)，于是抽了時(shí)間做了下面這個(gè)不成熟的例子：
CSS:
div{
width:140px;
height:140px;
text-indent:-8px;
text-align:center;
line-height:138px;
background:red;
font-size:12px;
*font-size:120px;
*text-indent:-60px;
}
img{
width:100px;
height:100px;
vertical-align:middle;
}
HTML:
< div>& nbsp;<img src="ipodclassics.jpg" alt="iPod classic" />
初衷是不想用position來(lái)做,畢竟 大量的圖片顯示瀏覽器在渲染的時(shí)候會(huì)消耗 較多的資源。
缺點(diǎn)是 輸出了 無(wú)意義的nbsp;, 而且font-size和font-indentd的計(jì)算公式不是很簡(jiǎn)單(所以以上的數(shù)字都是湊的^_^).
后來(lái)小馬見了這個(gè)思路，用了點(diǎn)時(shí)間升級(jí)了代碼,用:after輸出代替了無(wú)趣nbsp ,代碼見下。
CSS:
.tb-p-c{
display: block;
width:140px;
height:140px;
line-height:140px;
text-align:center;
*font-size:123px;
}
.tb-p-c img{
vertical-align:middle;
}
.tb-p-c:after {
content: ".";
visibility: hidden;
font-size: 12px;
margin-left: -5px;
}
HTML:
<a class="tb-p-c"><img src="jishi070912_2.jpg" /></a>
這樣子，惱人的nbsp消失了。大家對(duì)vertical-align:middle的渲染方式有了更進(jìn)一步的了解了。還讓很多同志發(fā)現(xiàn)了after這個(gè)偽類還可以用來(lái)hack.
結(jié)果圓心又給CSS升了次級(jí)：
CSS:
.tb-p-c{
display: table-cell;
vertical-align:middle;
width:140px;
height:140px;
text-align:center;
*display: block;
*font-size: 122px;
background:red;
}
.tb-p-c img {
vertical-align:middle;
}
這是第三次的升級(jí)，由于時(shí)間關(guān)系，沒有測(cè)試上面的代碼，原因是利用了display來(lái)渲染，感覺上還是會(huì)讓瀏覽器多次渲染，所以偶沒測(cè)試 。
這次探討給了我們很多很多的收獲，相信如果有大家的參與，會(huì)有更多方式和我們沒發(fā)現(xiàn)的觀點(diǎn)。大伙別小氣，多發(fā)表回復(fù)，一起提高。
本文鏈接：http://m.95time.cn/tech/web/2007/5008.asp 
出處：Taobao.com UI Team
責(zé)任編輯：moby
上一頁(yè) 段正淳的css筆記 [4] 下一頁(yè)
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 
第 5 頁(yè) 段正淳的css筆記 [5]
