css列表前面的图片偏上

你是否曾经遇到过，在使用CSS实现列表的时候，列表前面的图片总是往上偏，与文本不齐整的情况？这种情况是比较常见的，不过，不用担心，下面就来介绍一些解决方法。

/* CSS样式 */
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  background: url(images/icon.png) no-repeat 0 3px;
  padding-left: 20px;
  line-height: 24px;
  margin-bottom: 10px;
}

以上是一般情况下常用的CSS样式，其中我们给list-style属性赋值none，这样就可以去掉列表前面的默认样式，然后通过background属性来设置图片，并给padding-left添加一个值，让文本内容向右移动，同时设置line-height来保证图片与文本的间距。

然而，有时候，我们会碰到一些奇怪的情况，比如图片仍然偏上，或者文本不居中。此时，我们可以使用vertical-align属性来解决这个问题。

/* 使用vertical-align属性 */
li {
  display: table;
  background: url(images/icon.png) no-repeat 0 0;
  padding-left: 20px;
  line-height: 30px;
  margin-bottom: 10px;
}

li span {
  display: table-cell;
  vertical-align: middle;
}

我们在li标签里面添加一个span标签，并将其display属性设置为table-cell，然后再给vertical-align属性设置middle值，这样就可以让文本垂直居中了。

需要注意的是，vertical-align属性只对行内元素或表格单元格有效，因此，我们需要用display属性来修改li标签的属性，让其变成行内元素。

好了，以上就是关于CSS中列表前面的图片偏上的解决方法，希望可以帮到你。