Question

我已将图像32x32px设置为列表样式图像，如下所示：

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

它工作得很好，但问题是文本位于列表项的底部（因为图像高32px，列表项也是32px高）。我希望文本垂直居中，看起来不错。

我试过了：

.class li{
    line-height:1em;
}

但这没有帮助。

Answer 1

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

.class li {
    vertical-align: middle;
}

Answer 2

list-style-image标记应该应用于列表本身，而不是您应用的列表项。所以它会...... ..

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

Answer 3

我发现仅依靠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}

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

Answer 4

我尝试了上述所有内容并且没有任何效果，所以我做了这个

    .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;




    }

现在它就像一个魅力 - 事实上，这也使我能够更好地控制我想要放置我的li图像的确切位置。我使用的图像大小为32 X 32像素，所以我通过制作50px给它们一些额外的填充;

我希望这会有所帮助。

Answer 5

将line-height设置为元素的高度将垂直对齐文本。因此，如果<li>身高为32px，请将line-height设置为32px。

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

Answer 6

@mindmyweb，是的确你的解决方案有效。但是你的例子有点过于装饰100px高线，所以这里有一个更温和的例子。

图像应为20x20 png子弹，居中，斜角等，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，chrome 30完全相同，即＆gt; = 7。

帮助列表样式图像

6 个答案: