未知宽高图片在容器内水平垂直居中

最新推荐文章于 2020-09-07 10:21:08 发布

weixin_30883777

最新推荐文章于 2020-09-07 10:21:08 发布

阅读量86

点赞数

原文链接：http://www.cnblogs.com/baixc/p/3455120.html

版权

一个图片在容器内，水平垂直居中的效果。

效果原理：
利用veryical-align:middle，让img可以位于span的中间对齐。
而左右居中的话，由于img是特殊内嵌元素，所以它是受到text-align:center的控制的。

实现代码如下所示：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图片在容器内，水平垂直居中</title>
<style>
    .box{width:600px;height:400px;border:1px solid #000; text-align:center;}
    span{display:inline-block;height:100%;vertical-align:middle;}
    img{vertical-align:middle;}
</style>
</head>
<body>
    <div class="box">
        <img src="" alt=""/>
        <span></span>
    </div>
</body>
</html>