CSSアイコンをテキストに合わせて配置する方法

以下では、CSS アイコンとテキストの位置を調整する 2 つの方法を示します。とても良い内容だったので、皆さんにも参考にしていただきたいと思いますので、シェアさせていただきます。

ページを作成する過程で、小さなアイコンをテキストに揃えるという状況によく遭遇します。例:

量は比較的少ないです。

1つ目

imgの縦方向の配置を中央に設定、

XML/HTML

<p>
        <img src="" alt="" class="heart">
        <span>1169</span>
        <img src="" alt="" class="comment">
        <span>1168</span>
</p>

XML/HTML

p{    
     height:30px;    
     line-hight:30px;    
}    
.heart,.comment{    
        vertical-align:middle;    
}

2 番目のタイプ

を設定します小さなアイコンを背景画像として使用し、パディングを調整します

XML/HTML

<p>
        <span class="heart">1169</span>
        <span class="comment">1168</span>
</p>

JavaScript

.hear{    
        background:url(images/heart.png) left center no-repeat;    
        margin-right:20px;    
}    
.comment{    
        background:url(images/comment.png) left center no-repeat;    
}    
.hear,.comment{    
        height:30px;    
        line-height:30px;    
        padding-left:20px;    
}

以上がこの記事の全内容であり、その他の関連コンテンツについても役立つことを願っています。 、PHP中国語ネットに注目してください！ 関連する推奨事項:

CSS を使用して選択のドロップダウン矢印を削除する方法

以上がCSSアイコンをテキストに合わせて配置する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。