アイコンをテキストに合わせる 質問する

アイコン (左) とテキスト (右) を揃える、または逆にテキストを左に、アイコンを右に配置する最適な方法は何ですか?

アイコン画像とテキストは同じサイズにする必要がありますか? 理想的には、それらは異なっていても、同じ垂直方向の配置になるようにしたいと思います。

大きな画像からアイコンを取得するために、background-position CSS プロパティを使用しています。

これが私が現在行っている方法ですが、同じ行に配置するか、下部に垂直に揃えるかに苦労しています。

文章

あなたの提案を試してみた結果がこれです。

テキストはアイコンと揃いましたが、必要なアイコンの右側のアイコンの上に重ねられています。より大きな画像セットからアイコンを表示するために、背景の位置を使用していることに注意してください。

基本的に私は

<icon><10px><text_and_unwanted_icon_to_the_right_under_it>
<span class="group3_drops_icon group3_l_icon" style="">50</span>

group3_drops_icon {
background-position:-50px -111px;
}

.group3_l_icon {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(/images/group3.png) no-repeat scroll left center;
height:35px;
overflow:hidden;
padding-left:55px;
}