我正在工作的网站的设计要求在列表上使用自定义图像，而不是项目符号。使用该图像很好，但是我一直难以确保在所有浏览器中该图像都以列表项的文本为中心。有人知道为此的标准解决方案吗？

解决方案

回答

我们是否尝试过在CSS文件中添加以下代码？

li
{
   background-image: URL('custom.png');
   background-repeat: no-repeat;
   background-position: center;
}

回答

如果我们要为列表使用自定义图片项目符号，则这是我们要使用的代码，它将垂直居中。我在这里假设项目符号图片为12px x 12px。

ul li {
  background: transparent url(/link/to/custom/bullet.gif) no-repeat 0 50%; 
  padding-left: 18px; 
}

唯一的问题是，有时在长的多行列表项上它看起来很奇怪。在这种情况下，最好将背景位置分配给从顶部和左侧开始的轻微缩进(即，不重复0 7px)。

欢呼声，布鲁斯