您当前的位置:首页 > 网站建设笔记 >

未知大小图片在已知大小容器中垂直和水平居中

0

对于非IE6、IE7的方式是用行高,再控制图片的对齐方式就可以,例如:

<style type="text/css">
.valign {
	float:left;
	width:160px;
	height:160px;
	border:2px solid #444;
	overflow:hidden;
	line-height:160px;
	text-align:center;
	font-size:12px;
}
.valign img {
	vertical-align:middle;
	/*
	对于图片大于容器时,设置图片的最大宽高为容器的宽高。
	*/
	max-width:160px;
	max-height:160px;
}
</style>
<div class="valign">
	<img src="/uploadfile/2016/1231/20161231052131162.jpg">
</div>
<div class="valign">
	<img src="/uploadfile/2016/1214/20161214015746749.jpg">
</div>

效果如下所示:

建站咨询

咨询热线

微信交流

返回顶部