1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > CSS布局:设置图片在DIV中上下左右居中(水平和垂直都居中)

CSS布局:设置图片在DIV中上下左右居中(水平和垂直都居中)

时间:2018-06-13 13:07:54

相关推荐

CSS布局:设置图片在DIV中上下左右居中(水平和垂直都居中)

CSS布局实例,这个例子相信很实用,让一个图片在Div容器中上下、左右都居中,也就是水平和垂直都居中,有用吧,平时遇到的机率挺高的,下面结合CSS和HTML来实现这个演示,请参见代码:

<style type="text/css">div{border:1px solid #ccc;height:500px;width:500px;text-align:center;margin:0 auto;background:#ccc;}img{vertical-align:middle;}div span{height:100%;width:0;overflow:hidden;display:inline-block;vertical-align:middle}</style><div class="test"><img src="http://p./star3/origin/53c8d26ba310a822ad8b3447.jpg"><span> </span></div>

测试效果:可看到图片在Div class内水平和垂直居中

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。