成功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