如何使文本與圖像居中對齊

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

我建議你這個代碼

style="vertical-align:middle"

Answer 2

使用行高技巧。 如果您確定，文本將只適合一行。 通常有兩種可能-行高和padding-top。 填充可以影響欄的尺寸，但是行高不應該，但是當您具有單行文本/標題時，行高才可以。

我不確定垂直對齊是否適用於文本的內聯元素。