建议设置div的ELEMENT_NODE位置的方法？

Question

this

    

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

但是当我将 　　#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> 设置为line-height时，“allMessages”始终与#top div具有相同的底部。
 建议将“allMessages”文本的位置设置为与svg中间相同的高度。

Answer 1

使用以下内容更新您的code。

#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>