星期四, 2月 12, 2009

怎樣在div裡的img上下左右都置中

之前遇到一個問題..就是.."怎樣在div裡的img上下左右都置中"..之前遇到這問題時..我大部份都會用table去做掉..因為..div內的上下置中真的很XD..今天拜了一下大神..找到一篇文章..他可以做到上下置中..只是我覺得很麻煩..自己花個10分鐘試來試去..加上自己css的微薄觀念..試出一個好像可以解決問題的方法..看code吧..

<div style="width: 300px; height: 300px; border: solid 1px red;
text-align: center; display: table-cell; line-height: 300px;
vertical-align: middle;"
>
<img src="images/test.jpg" alt="" />
</div>

效果就是..

fsdf

這個範例結構很單純..我只有測試..ie7 跟 firefox 3.0.6..其他的browser留給大家去玩ㄅ..Tongue..最後..還是要說..如果真的搞不出來還是用table吧..能抓到老鼠的都是好貓..HypnotizedHypnotizedHypnotizedHypnotizedHypnotized..

3 則留言:

匿名 提到...

我的意見就是...
你放〝別的〞女人照片...
我不爽><..

demo 提到...

改一張照片再發一次吧....我等你

Bibby 提到...

效果是重點..別把焦點放錯地方了..