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

使用行高技巧。如果您确定，文本只适合一行。通常有两种可能性 - 线高和填充顶部。填充可以影响条的尺寸，但是当你有单行文本/标题时，它不应该是行高，但它可以工作。

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

如何使文本与图像对齐

2 个答案: