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となります。
svgの真ん中と同じ高さで「allMessages」テキストの位置を設定するための推奨方法は何ですか。

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>