PNG子弹点对齐

Question

我已经设法在我的网站上显示图形项目符号，但我无法正确对齐文本的中间位置。

就好像我只需要在子弹图像中添加不影响文本的边距。

以下是我正在处理的页面：http://new.leicesterymca.co.uk/youth-community/our-work/adult-homelessness/

这只是带有li元素的标准ul：

ul {
  list-style: none;
  padding:0;
  margin:40px 0 40px 0;
}

li { 
  margin-bottom: 20px;
  padding-left: 2.3em;
  text-indent: -2.3em;
}

li:before {
  /* -content: "●";-*/
  content:"";
  background-image: url('http://new.leicesterymca.co.uk/wp-content/uploads/2017/03/arrow-bullet.png');
  background-size: 20px 20px;
  display: inline-block;
  width: 20px; 
  height: 20px;
  margin-right: .7em;
}

a {
  text-decoration: none;
  color: #2f9395;
}

a:hover {
  color: #163a52;
}

这是我的CSS：

re.I

感谢。

Answer 1

尝试添加...

li:before {
  vertical-align: middle
}

到你的CSS

Answer 2

这对你有用

    li:before {
     vertical-align: middle
    }