UL 中的偏移子弹图像答案

【问题标题】：Offset bullet image in ULUL 中的偏移子弹图像
【发布时间】：2018-04-25 05:17:23
【问题描述】：

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

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

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

【问题讨论】：

这样你就可以玩弄它了吗？意思是你还不知道答案？

标签： css

【解决方案1】：

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

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

Demo

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 */
}

【讨论】：

@Itay 他想定位list-style-image
@Itay 还有，你可能会提到类似的东西here
我只是在问.. 无论如何你是对的。你所做的可能是最好的方法
@Itay 是的，实际上，如果您使用list-style-image，则无法正确定位图像，因此最好使用background-image :)

【解决方案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。

【讨论】：