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%;
}css设置文字垂直居中
.verifyCodePic{
margin: auto auto;                      // 图⽚居中对齐需要
/*vertical-align: center;*/
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。