真正的图片居中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 -------------------- */