CSS图片和文字、div排版对齐

图片和文字居中对齐给图片的样式中加入vertical-align:middle

<img  class="userIcon">
<div class="usernameDiv">{{username}}</div>

.userIcon{
    width: 36px;
    height: 36px;
    margin-right: 8px;
    border-radius: 18px;
    vertical-align:middle
  }
  .usernameDiv{
    /*height: 50px;*/
    /*line-height: 50px;*/
    display: inline-block;
  }

图片在div中垂直居中

<div class="verifyCodeDiv">
      <el-input ref="verifyCode" v-model="verifyCode" class="verifyCodeInput" placeholder="Verification Code" required></el-input>
      <img class="verifyCodePic imgCommon" :src="verifySrc" @click="getVerify"/>
    </div>
    
.verifyCodeDiv{
    margin: 0 auto; // 使verifyCodeDiv水平居中
    width: 60%;
    text-align: left; // verifyCodeDiv中的dom左对齐
    display:flex;                                  // 图片居中对齐需要
    vertical-align: center;                   // 图片居中对齐需要
  }
  .verifyCodeInput{
    display: inline-block;
    width: 86%;
  }
  .verifyCodePic{
    margin: auto auto;                       // 图片居中对齐需要
    /*vertical-align: center;*/
  }