リストの画像と文字がズレる場合、高さを揃えるcss

リストの画像を特定のイラストに変更したら、文字と高さがそろわないことありますよね?

よくある失敗がこちら「HTMLで直接入れている」

例えば、
htmlタグの例
リストと画像が合わない例

これだと、画像は入るものの、位置の調節ができなくなります。
なので改善方法は、クラス指定にして、cssに変更することです。

クラス指定にして、cssに変更する手順がこちら

まず、リストタグにクラスを指定します。
リストタグ

そして、cssにて「top1」の値を記述します。

.top1{
list-style-type:none;
background-image:url(画像のURL);
background-repeat:no-repeat;
background-position:left center;

}

ただ、これだと、画像の位置が合わなくなります↓

リストにバックグランドimgを指定した画像

なので、「padding」タグを使って画像を調節してください。

.top1{
padding-left:30px;
padding-top:5px;
}

paddingタグで画像を調節した様子

ランキングのように、違う画像を使うには?

画像とランキングの高さがキレイにそろった画像
図のようにランキング1位・2位・3位で、違う画像にするならば、
クラス指定の例
このように、リストタグ毎に、クラスを指定する必要があります。
そして、cssのimg毎に画像URLを変更してください。

コメントは受け付けていません。