flex中的图片垂直居中

 

这次的需求是图文左右排列，左边是图片，固定宽高，右边是文字，不确定文字的多少

效果如下;

这是文字超多的时候图片垂直居中，

这是文字比较少的时候，文字垂直居中显示。

实现方法如下：

html

<div class="wrapper">
    <img class="img" src="https://literature.baooo.cn/images_literature/product-class@2.jpg">
    <div class="text">第一，致力于推进经济务实合作。我们应该在贸易投资、货币金融、互联互通、可持续发展、创新和产业</div>
</div>

css

    <style type="text/css">
        .wrapper{
            width: 500px;
            border:solid 2px #ccc;
            display: flex;
            flex-direction: row;
            align-items: center; /*垂直居中*/
            justify-content: center; /*水平居中*/
        }
        .img{
            width: 200px;
            height: 200px;
            vertical-align: middle;
            align-items: center;
        }
        .text{
            flex: 1;
            padding-left: 50px;
        }
    </style>    

over~