div中未知宽高的img垂直居中显示

最新推荐文章于 2021-04-27 20:40:00 发布

你dodo

最新推荐文章于 2021-04-27 20:40:00 发布

阅读量830

点赞数 1

分类专栏： css 文章标签： div img垂直居中

本文链接：https://blog.csdn.net/u012603567/article/details/50960557

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<div>
        <img src="../pic/img2.png" alt="">
        <img src="../pic/title.png" alt="">
        <span>dasd</span>
    </div>

 div {
        width: 800px;
        height: 200px;
        background-color: #eee;
        line-height: 200px;
        text-align: center;
        font-size: 0; // 解决inline-block换行导致的空白
    }

    div span{
        font-size: 16px;
        vertical-align: middle;// 可让行内元素垂直居中
    }
    
    img {
        vertical-align: middle; // 可让行内元素垂直居中
        max-height: 100%; // 防止图片大小大于div容器大小
        max-width: 100%;
    }

效果图：

小结：

1.设置div的width,height;line-height等于height;text-align:center;font-size:0(解决inline-block换行导致的空白)
2.设置img的vertical-align:middle,同时设置max-height:100%,max-width:100%,防止未知图片的宽高大于div容器的宽高
3.若存在文字元素紧随图片之后即在同一行，则使用span包裹,并设置vertical-align:middle;
然后设置font-size:16px;

去掉：1中的text-align:center;为垂直居中
去掉: 1中的line-height等于height为水平居中