flex中的圖片垂直居中

 

這次的需求是圖文左右排列，左邊是圖片，固定寬高，右邊是文字，不確定文字的多少

效果如下;

這是文字超多的時候圖片垂直居中，

這是文字比較少的時候，文字垂直居中顯示。

實現方法如下：

html

<div class="wrapper">
    <img class="img" src="https://literature.baooo.cn/images_literature/[e-mail]">
    <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~