【原】成功vue图片文字上下对齐

 <div :class="{ 'has-logo': showLogo }">

    <logo v-if="showLogo" :collapse="isCollapse" />

    <div style="background-color: #6889b2; padding: 5px;padding-left:15px;">

      <div style="float: left; margin-right: 30px;width:45%;">

        <img 

          style="width: 22px; height: 23px;vertical-align:middle"

          :src="require('@/assets/img/woman.png')"

        />

        <span style="font-size:14px;color:#fff;vertical-align:middle">{{ this.LZBaseSession.WomanName }}</span>

      </div>

      <div>

        <img

          style="width: 22px; height: 23px;vertical-align:middle"

          :src="require('@/assets/img/man.png')"

        />

        <span style="font-size:14px;color:#fff;vertical-align:middle">{{ this.LZBaseSession.ManName }}</span>

      </div>

    </div>

    <div

      style="

        height: 105px;

        font-size: 14px;

        color: white;

        text-align: left;

        padding: 5px 0 0 15px;

        background-color: #081a30;

      "

      v-show="isShow"

    >

      <div>

        卵障号：

        <label>{{ this.LZBaseSession.EggDevelopementDisorderNumber }}</label>

      </div>

      <div style="margin-top: 10px">

        家系号：

        <label>{{ this.LZBaseSession.FamilyNumber }}</label>

      </div>

      <div style="margin-top: 10px">

        医卡通号：<label>{{ this.LZBaseSession.CardNumber }}</label>

      </div>

      <div style="margin-top: 10px" @click="Open_BingLi">

        辅助生殖号：

        <label>{{ this.LZBaseSession.SeriousIllnessNumber }}</label>

      </div>

</div>

关键代码：

<div style="float: left; margin-right: 30px;width:45%;">

        <img 

          style="width: 22px; height: 23px;vertical-align:middle"

          :src="require('@/assets/img/woman.png')"

        />

        <span style="font-size:14px;color:#fff;vertical-align:middle">{{ this.LZBaseSession.WomanName }}</span>

      </div>

图片文字都要加属性：vertical-align:middle