我爱学习网首页 | 设为首页 | 收藏本站 | 网站地图 您好,欢迎光临我爱学习网
我爱学习网

当前位置:首页 > 编程开发 > css >

img图片在DIV中垂直居中显示 css样式

时间:2016-06-22 16:48 来源:未知 | 作者:我爱学习网 | 本文已影响
CSS样式如下:
.div1{
	width:800px;
	height:800px;
	border:1px solid #F00;
	text-align:center;
}
.div1 span{
	height:100%;
	display:inline-block;
	vertical-align:middle;
}
.div1 img{
	width:200px;
	height:200px;
	vertical-align:middle;
}

HTML的源代码如:

<div class="div1"><span></span><img src="test.jpg" alt="图片垂直居中"></div>

利用vertical-align实现垂直,决定行高的是行内最高的元素的值。 (责任编辑:我爱学习网)


分享到: 更多