关于列表样式图像的帮助

你可以使用 vertical-align 属性指定居中对齐。像这样:

.class li {
    vertical-align: middle;
}

这个 list-style-image 标记应该应用于列表本身,而不是您所拥有的列表项。所以应该是……

ul.class{
    list-style-image:url(../images/site/img.png);
}

我发现当我仅仅依靠 list-style 做这项工作。

因此,我喜欢将图像作为背景放在li标签中,就像这样

ul      {list-style-type:none}
ul li   {list-style-type:none;
             background:url(image.png) 1px 4px no-repeat;
             margin:0;
             padding-left:20px}

这将导致图像向右放置1个像素,从LI标记所覆盖区域的左上角开始测量,向下放置4个像素。 margin:0 需要避免对li内容的缩进,因为我们使用 padding:20px 为LI内容左侧的图像腾出空间。

我尝试了以上所有的方法,但没有任何效果,所以我做到了。

    .coreUL li{


    display:block;
    list-style:none;
    background-image:url(../images/factoryIcons.png);
    background-repeat:no-repeat;
    background-position:left 8px;
    padding-top:10px;
    padding-left:50px;

    height:100px;




    }

现在这就像是一种魅力——事实上,这也让我能够更准确地控制我想要放李图像的地方。我使用的图片是32 x 32像素的大小,所以我通过制作50像素的图片给了他们一些额外的填充物;

我希望这有帮助。

设置您的 line-height 到元素的高度将文本垂直对齐。所以如果你 <li> 身高是 32px 然后设置你的 线条高度 到 32 px .

.class li { height:32px; line-height:32px; list-style-image:url(img.png); }

@MindmyWeb,是的,你的解决方案确实有效。但是你的例子用100px的高线装饰得有点太过了,所以这里有一个更温和的例子。

图像应该是一个20x20 PNG项目符号,居中,第w_?斜角等,阴影边缘区域为3px。

.post li, .page li {
  background-image: url("images/bullet-square-big-red.png");
  background-position: left 2px;
  background-repeat: no-repeat;
  list-style: none outside none;
  margin-bottom: 12px;
  padding-left: 25px;
  padding-top: 0;
}

在Firefox 24、Chrome30、IE>=7中的工作原理完全相同。