html - CSSカスタムブレットを使用してリスト内でテキストを適切に整列させる

Question

リスト内のテキストを正しく配置しようとしていますが、正しく配置できません。

ご覧のとおり、テキストはわずかにずれており、「画像の箇条書き」のベースラインから始まります。真ん中にしたい。

ソース：

//CSS
ul  {
    list-style-image:url(image/li.png);
    list-style-position:outside;
    margin:0; padding:0;
}
ul li {
    margin:0; padding:0;
}

//HTML
<ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
</ul>

Answer 1

li 背景画像を定義し、デザインbackground positionに従って定義します

ul  {
    list-style:none;
     margin:0; padding:0;
}
ul li {
    margin:0; padding:0;
  background:url('') no-repeat 0 0;
  padding-left:40px;  // according to your image with
  min-height:40px; // according to your image height
}

デモ

DEMO2 OPの正確な要件による

Answer 2

li 要素の line-height プロパティをカスタム アイコンの高さと同じに設定する必要があります。

たとえば、アイコンの高さが 32px の場合、次のように記述します。

ul li {
  line-height: 32px;
}

ul 要素を識別するために id を使用することをお勧めします。そうしないと、ドキュメント内のすべての ul に影響を与える可能性があります。