真正的图片居中box

真正的图片居中box

1.公用css

.square60{width:60px;height:60px;}.square100{width:100px;height:100px;}.square102{width:102px;height:102px;}.square120{width:120px;height:120px;}.square122{width:122px;height:122px;}.square142{width:142px;height:142px;}.square162{width:162px;height:162px;}.square200{width:200px;height:200px;}.square240{width:240px;height:240px;}.square360{width:360px;height:360px;}

 

2.box 1 (假的,在ie6/7出问题)

/* -------------------- image box -------------------- *//* http://www.cnblogs.com/shabingliang/archive/2008/09/15/1291115.html *//* ie 6/7 bug! */.imgbox{ /*非IE的主流浏览器识别的垂直居中的方法*/ display:table-cell; vertical-align:middle; /*设置水平居中*/ text-align:center; /* ie hack */ *display:block; *font-size:175px;/*约为高度的0.873，200*0.873 约为175*/ *font-family:Arial;/*防止非utf-8引起的hack失效问题，如gbk编码*/ border:1px #ddd solid; padding:2px; overflow:hidden; /*width:500px;*/ /*height:500px;*/}.imgbox img{ /*设置图片垂直居中*/ vertical-align:middle;}/* -------------------- image box end -------------------- */

 

<div class="imgbox square122"> <img src="..." mce_src="..." alt="产品" onload="setAutoSize(this,120);" /></div>

 

3.box 2(真正的?暂且吧)

/* -------------------- image box 2 -------------------- *//* http://www.hibloger.com/article.asp?id=75 */.imgbox2 { overflow:hidden; position:relative; display:table-cell; text-align:center; vertical-align:middle; /*width:500px;*/ /*height:500px;*/ border:1px #ddd solid;}.imgbox2 p { position:static; +position:absolute; top:50%;}.imgbox2 img { position:static; +position:relative; top:-50%; left:-50%;}/*html:<div class="imgbox2"> <p><img src="http://www.google.com/intl/en/images/logo.gif" mce_src="http://www.google.com/intl/en/images/logo.gif" /></p></div>*//* -------------------- image box 2 end -------------------- */