欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

图片在DIV中居中

程序员文章站 2022-04-05 08:05:19
...

图片在DIV中永远居中

 

<div id="div_image_box_wrapper1">
	<div id="div_image_box_wrapper2">
		<div id="div_image_box">
			<img src="*.jpg" />
		</div>
	</div>
</div>

 

#div_image_box_wrapper1 {
	width:580px; height:358px;
	display:table-cell;
	vertical-align:middle;
}

#div_image_box_wrapper2 {
	width:580px; height:358px;
	overflow:hidden;
	display:table;
}
#div_image_box {
	display: table-cell;
	vertical-align:middle;
	text-align:center;
}
/*for IE*/
#div_image_box_wrapper2 {
	*position:relative;
}
#div_image_box {
	*width:100%;
	*position:absolute; 
	*top:50%; 
	*left:0;
}
#div_image_box img{
	*position:relative;
	*top:-50%;
	*margin:0;
	*padding:0;
}
#div_image_box img{
	*margin-top:2px;
	*margin-bottom:2px;
}/*for IE bug*/
 
相关标签: IE