html - 如何使文本与图像居中对齐

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>

我的代码是这样的，无论我如何尝试，它仍然对齐顶部，我的问题是如何使文本居中对齐。

因此，我希望文本和图像居中对齐，文本居左，图像居右。

Answer 1

使用行高技巧。如果您确定，文本将只适合一行。通常有两种可能性 - line-height 和 padding-top。填充可以影响栏的尺寸，但行高不应该，但是当你有单行文本/标题时它会起作用。

我不确定垂直对齐是否适用于文本的内联元素。