图片居中:任意图片在div里的上下垂直都居中!

老白 3个月前 220浏览 0评论

任意一个图片,在div中都居中显示,这是比较常用的CSS,很多刚学习的新手却并不知道!

任意图片居中显示.png 图片居中:任意图片在div里的上下垂直都居中! CSS学习

<style type="text/css"> 

   div{ border:1px solid #ccc; 

    height:500px; width:500px; line-height: 500px;

    text-align:center;

    background:#ccc;} 

   img{ vertical-align:middle;max-width: 100%;max-height: 100%; }

</style>

<div class="test"><img src="test3.jpg"></div>

或者:

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

第一段CSS和第二段有什么不同呢? 第一段CSS使用了line-height: 500px;,第二段没有line-height,CSS和HTML却都多了span,都实现一样的效果!

可能会有疑问,比如图片后面加入span干什么呢?难道是标题的用途?NO!

span是为img撑开空间用的,img比较特殊,不会撑起上下空间,图片本身的尺寸只能限制图片,上下居中,必须有span为它撑开一定垂直空间,它在一定空间中才可以!

第一段中没有使用span,一样垂直居中了,又是如何办到的?因为div的CSS使用了line-height: 500px;,就已经用行高撑起了空间,所以无需span! 两种方法都可以,但具体到实际代码中可以挑选其中一种!

评论