インラインブロック（テキストなし）要素をテキストとインラインでレンダリングする

Question

インラインブロック要素があります。これらはグリフであり、SVGコンテンツを含むことができますが、テキストは含みません。

.example { 
 
    line-height: 32px; 
 
    margin: 12px 0; 
 
} 
 

 
.wrapper { 
 
    display: inline-block; 
 
    height: 24px; 
 
    width: 24px; 
 
    position: relative; 
 
    background-color: red; 
 
} 
 

 
.wrapper > .content { 
 
    position: absolute; 
 
    bottom: 3px; 
 
    right: 3px; 
 
    height: 12px; 
 
    width: 12px; 
 
    background-color: blue; 
 
}

<div class=example> 
 
    <div class=wrapper> 
 
     <div class=content> 
 

 
     </div> 
 
    </div> 
 
    not aligned with text 
 
    <div class=wrapper> 
 
     <div class=content> 
 

 
     </div> 
 
    </div> 
 
</div>

私は簡単に十分な個々の要素をシフトダウンすることができますが、それは厄介だとマイクロ微調整の多くを必要とします

問題は、これらの要素は、テキストと整列していないということです。

私は、行の高さとアイコンのサイズが同じであることに頼ることができず、SVG内部がオーバーレイされています。絶対的な配置が必要です。

これらをテキストで一貫して垂直に中央に配置する方法はありますか？

Answer 1

ラッパークラスへvertical-align:bottomを指定します。

.example { 
 
    line-height: 24px; 
 
    margin: 12px 0; 
 
} 
 

 
.wrapper { 
 
    display: inline-block; 
 
    height: 24px; 
 
    width: 24px; 
 
    position: relative; 
 
    background-color: red; 
 
    vertical-align:bottom; 
 
} 
 

 
.wrapper > .content { 
 
    position: absolute; 
 
    bottom: 3px; 
 
    right: 3px; 
 
    height: 12px; 
 
    width: 12px; 
 
    background-color: blue; 
 
}

<div class=example> 
 
    <div class=wrapper> 
 
     <div class=content> 
 

 
     </div> 
 
    </div> 
 
    aligned with text 
 
    <div class=wrapper> 
 
     <div class=content> 
 

 
     </div> 
 
    </div> 
 
</div>

を