<ion-view view-title="个人信息">
<ion-content>
<style>
.user-details {
display: flex;
align-items: center;
justify-content: space-between;
height: 80px;
}
.user-detail-left {
border: 1px dashed red;
}
.user-detail-avatar {
width: 64px;
height: 64px;
}
</style>
<div class="list">
<a class="item user-details" href="#">
<span class="user-detail-left">头像</span>
<img class="user-detail-avatar" src="img/wechat.png"></img>
</a>
<a class="item" href="#">
<span>昵称</span>
<span>xxx</span>
</a>
<a class="item" href="#">
<span>帐号</span>
<span>xxx</span>
</a>
</div>
</ion-content>
https://i.sstatic.net/n2tWB.png
My code looks like this, no matter what I do, it still aligns to the top. My question is how do I make the text align in the middle.
So, I want the text and image to be aligned vertically centered, with the text on the left and the image on the right.