css - UL 中的偏移子弹图像

Question

在我的无序列表中，我为项目符号使用了一个图像，但项目符号看起来与它右侧的文本底部对齐。我想让它位于文本高度的中间。css中是否有某种方法可以使子弹居中或添加偏移量？

<ul>
  <li>item 1</li>
  <li>item 2</li>
</ul>

ul
{
  list-style-image: url('/images/bullet_blue_8x8.png');
}

Answer 1

list-style-image您可以使用属性来使用background-image和定位子弹，而不是使用background-position。

或者如果你愿意，你也可以使用:before伪

演示

ul li {
  background-image: url(http://www.tandf.co.uk/journals/society/images/icon_pdf.gif);
  background-repeat: no-repeat;
  padding-left: 20px;
  margin-bottom: 10px;
  background-position: 0 1px; /* X = 0 and Y = 1px */
}

Answer 2

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  background: url("/images/bullet_blue_8x8.png") no-repeat 0 -2px;
  padding-left: 18px;
  font-size: 12px;
}

你需要使用background-image.