Question

我遇到了CSS list-style-image标签的问题我的列表图像有些大，而后面的文本被推到了样式标记的下半部分，有没有修复它的位置中间

现在是这样的：

|
|
| here

我希望成为：

|
| here
|

Answer 1

只需增加相关li元素的行高。

#iconlist li {
  line-height: 2em;
}

另外，正如keithjgrant建议的那样，我会使用背景图片。列表图像在不同的浏览器中定位相当不一致。所以使用这样的东西：

#iconlist li {
  padding-left: 22px;
  background: url(20x20-icon.png) left center no-repeat;
  line-height: 22px;
  list-style: none;
}

Answer 2

忘记设置列表样式图像并使用以下css ...

ul#example li {
    list-style-type: none;
}

/* create new marker */
ul#example li:before {
    display: marker;
    content: url("new_marker.png");
    /* set the following to fit your needs */
    vertical-align: 3px;
    padding-left: 2px;
    padding-right: 12px;
}

请注意垂直对齐样式，将其设置为负数以向上推文字。

Source of answer.

Answer 3

您的问题有点不清楚，但听起来您可能需要查看背景图片而不是（或补充）列表样式图片。

Answer 4

实现这一目标的唯一现实方法是background-image：

ul li {
    background: transparent url(http://farm1.static.flickr.com/120/308863127_6eb1715f3b_m.jpg) 0 50% no-repeat;;
    list-style-position: outside;
    padding-left: 250px;
    line-height: 160px; /* vertical height of image */
}

JS Fiddle demo

然而，这是fail badly if the text of the li wraps to a second (or third) line。

Answer 5

尝试vertical-align: middle;（css）

CSS list-style-image

5 个答案: