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伪

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

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。

UL中的偏移子弹图像

2 个答案: