擬似要素前/後

Question

私はリンクの左側にある画像を使用しています。
現時点では、画像の:: before属性を使用していますが、リンクの少し上に表示されます。

私はそれを整列させる必要があります。 Link

私が使用しているコードは次のとおりです：ここではPICのです

.vocabulary-duration::before { 
    content: ""; 
    float: left; 
    font-family: "FontAwesome"; 
    font-size: 18px; 
    padding-right: 0.5em; 
} 

Answer 1

あなたはfloatを削除し、inlineまたはinline-blockを使用して、使用することができますがvertical-align

.vocabulary-duration::before { 
 
    content: ""; 
 
    font-family: "FontAwesome"; 
 
    font-size: 18px; 
 
    padding-right: 0.5em; 
 
    vertical-align: middle; 
 
    display: inline-block; 
 
}

<div class="vocabulary-duration">asdf</div>