图片和文字如何显示在一行并垂直对齐

 

 

<div class="mainContain">
  <img src="">
  <div class="textDescription">
     <span class="baseInfo"> 张三  </span>
      
     <span class="positionInfo">  部门-职务 </span>
  </div>
<div>


less 内容

方法一：
 .mainContain{   
   padding:24px;
   background-color:#fff;
   
   .textDescription{
     //vertical-align:middle;  //1写这里没起作用
     img{
           //float:left;  // 两个float可以成为一行，但是实现不了垂直居中。
           //display:inline-block;  //2这里写不写，照片和文字都会成为一行。
            width:58px;
             height:58px;
         }
     .positionInfo{
            //float:left;  // 两个float可以成为一行，但是实现不了垂直居中。
            display:inline-block; //3必须
            vertical-align:middle;//4必须
       }
    
    }

  }


方法二：
 .mainContain{   
   padding:24px;
   background-color:#fff;
   
   .textDescription{
       display: flex; //必须
       align-items: center;//必须
     img{
         
            width:58px;
             height:58px;
         }
     .positionInfo{
           
       }
    
    }

  }