html - 设置 div 的 ELEMENT_NODE 位置的推荐方法？

Question

 　　#top {
            height: .5rem;
            padding-left: 2.7rem;
            line-height: .5rem;
            color: #666;
            font-size: .12rem;
            position: relative;
            background-color: rgb(241, 241, 241);
        }

        #top div {
            position: absolute;
            right: .18rem;
            top: 50%;
            transform: translateY(-50%);
            font-size: .14rem;
            line-height: .20rem;
        }

        #top .icon {
            font-size: .28rem;
        }

<section id="top">
    <div>
        allMessages
        <svg class="icon record-info" aria-hidden="true">
            <use xlink:href="#icon-wenjuan"></use>
        </svg>
    </div>
</section>

我想在 div 的中间设置“allMessages”。

但是当我将 line-height 设置为 #top div 时，“allMessages”始终与 svg 具有相同的底部.
将“allMessages”文本的位置设置为与 svg 中间相同高度的推荐方法是什么。

Answer 1

使用以下内容更新您的代码。

#top {
    height: .5rem;
    padding-left: 2.7rem;
    line-height: .5rem;
    color: #666;
    font-size: .12rem;
    position: relative;
    background-color: rgb(241, 241, 241);
}

#top div {
    position: absolute;
    right: .18rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: .14rem;
    line-height: .20rem;
}

#top .icon {
    font-size: .28rem;
}
#top span {
    display: inline-block;
    vertical-align: middle;
}

<section id="top">
    <div>
        <span>allMessages</span>
        <svg class="icon record-info" aria-hidden="true">
            <use xlink:href="#icon-wenjuan"></use>
        </svg>
    </div>
</section>