how to make text align middle with image

Question

<ion-view view-title="个人信息">
<ion-content>
    <style>
        .user-detail-item {
            position: relative;
            height: 80px;
        }
        .user-detail-left {
            position: absolute;
            border: 1px dashed red;
            top: 0;
            bottom: 0;
            height: 80px;
            margin: auto;
        }
        .user-detail-avatar {
            position: absolute;
            height: 64px;
            width: 64px;
            right: 16px;
            top: 0px;
            bottom: 0px;
            margin: auto;
        }
    </style>
    <div class="list">
        <a class="item user-detail-item" 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>

my code like this, whatever how I try, it still align the top, my question is how to make the text align middle.

so, I want the text and image align mid, and the text left, image right.

Answer 1

我建议你这个代码

style="vertical-align:middle"

Answer 2

Use line-height trick. If you are sure, the text will fit on just one line. There are generally two possibilities - line-height and padding-top. The padding can affect the dimensions of the bar, but line-height should not, but it works, when you have single-line text / title.

I am not sure if vertical align will work for inline element of text.