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

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

程序员文章站 2022-04-24 20:57:04
...

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.ananas.chaoxing.com/star3/origin/53c8d26ba310a822ad8b3447.jpg"><span> </span>
</div>

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

相关标签: css html 布局