css 圖片垂直置中(相容各主流瀏覽器，含IE6/IE7)

1.利用table-cell實現置中，font-size做相容相容IE6+/FF/Chrome
優點：不添加任何多餘標籤，相容主流瀏覽器

代碼如下	複製代碼
<!--html結構--> <div class="box-1">  <a class="img-wrap-1" href="#">   <img src="images/1.png" alt="" />  </a> </div> /* 樣式 */ .box-1{ display:table;} .img-wrap-1{ display:table-cell; width:200px; height:200px; border:1px solid #ccc; text-align:center; *font-size:178px; zoom:1; vertical-align:middle;} /* height與font-size之比大約為：1:0.893; zoom:1是為了觸發IE的hasLayout */

2.利用line-height實現置中相容IE7+/FF/Chrome
優點：不需要任何hack，相容IE7+主流瀏覽器
缺點：此方法不相容IE6，當然也可以用方法1中的font-size來相容IE6

代碼如下	複製代碼
<!--html結構--> <div class="box-2">  <a class="img-wrap-2" href="#">   <img src="images/1.png" alt="" />  </a> </div> /* 樣式 */ .img-wrap-2{ display:inline-block; width:200px; height:200px; line-height:200px; border:1px solid #ccc; text-align:center;} .img-wrap-2 img{ vertical-align:middle;}

3.利用button標籤實現置中相容IE6+/FF/Chrome
優點：不需要任何hack，相容IE6+主流瀏覽器
缺點：添加了多餘的標籤button

 

代碼如下

複製代碼

<!--html結構--> <div class="box-3">  <a class="img-wrap-3" href="http://www.111cn.net/" target="_blank">   <button disabled="disabled"><img src="images/1.png" alt="" /></button>  </a> </div> /* 樣式 */ .box-3{ display:inline-block; width:200px; height:200px; border:1px solid #ccc; text-align:center;} .img-wrap-3 button{ width:100%; height:100%; border:0; background:none;} .img-wrap-3 img{ cursor:pointer;}

4.利用1px小圖片實現垂直置中相容IE6+/FF/Chrome
優點：不需要任何hack，相容IE6+主流瀏覽器
缺點：添加了多餘的標籤img

 

代碼如下	複製代碼
<!--html結構--> <div class="box-4">  <img class="blank" src="images/blank.gif" alt="" />  <a class="img-wrap-4" href="#" target="_blank">   <img src="images/1.png" alt="" />  </a> </div> /* 樣式 */ .box-4{ display:inline-block; width:200px; height:200px; border:1px solid #ccc; text-align:center;} .blank{ width:0px; height:100%; vertical-align:middle;}

當然，垂直置中的方法不止以上幾種，但目前較常用的也就這幾個，而且相容性比較好，後面若發現更好的方法再進行補充