簡易解決圖片置中問題(自認為....)

基本上...這只能解決有固定高度與寬的DIV內的圖片置中，如果不設定高度與寬度...就會無法呈現上下左右圖片置中問題...

可先參考此篇：http://www.cnblogs.com/shabingliang/archive/2008/09/15/1291115.html
(以上此篇隨邊找都能找到一模一樣的內容文章...真的是相似度極高阿...)

以下是我針對實作修改後的樣式


<style>
.photoLists { width:201px; height:134px; position:relative;}
.photoBox { position:absolute; left:-1px;}
.photoListImg { float:left; margin:1px; background:#CCC url(/img/album/photoBg.gif);}/*設定放圖片的樣式
.photoLists a {
 /*非IE的置中方法*/
 display: table-cell;
 vertical-align:middle;
 text-align:center;

 /*針對IE的hack */
 *display: block;
 *font-size:56px;/*約為高度的0.873，65*0.873 約為56 (PS1.要將放置圖片的div高度乘以0.873倍*/)
 *font-family:Arial;/*防止非utf-8引起的hack失效，如gbk編碼*/

 width:65px;
 height:65px;
 }
 .photoLists img {
 /*設置圖片置中*/
 vertical-align:middle;
 }

</style>

<div class="photoBox">

<div class="photoListImg">

<a href="#">

<img src="img.gif" width="50" height="50" />

</a>

</div>

</div>

--------------------------------------------------------------------------------

所以以上..解決了我在三大瀏覽器上的圖片置中問題
firefox、chrome、IE7.8.9 都OK

雖說有點怪招，卻很簡易....自己試了很久都試不出來，GOOGLE一下就試出來了

(GOOGLE真是神)

PS1.關於0.873是怎麼來的，上網又查了一下..說是："抓出特定字型在 IE font-size 和所產生行高的比例，然後就以此比例來算出要垂直置中 font-size 該設多少。他算出來字型 Arial 的比例是 0.873"....balabala..

可參考此篇：http://blog.xuite.net/vexed/tech/22551671

此篇還有額外的應用實例可參考(果然還是繁體好)

還有好多好多延伸閱讀...

但我很懶.......
很懶的打字
很懶的作編輯
..............................

........

...