PNG项目符号点对齐

Question

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

好像我只需要在不影响文本的项目符号图像上添加边距。

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

这只是一个带有 li 元素的标准 ul:

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ul>

这是 CSS 我有：

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

谢谢。

Answer 1

尝试添加...

li:before {
  vertical-align: middle
}

给你的CSS

Answer 2

这对你有用

    li:before {
     vertical-align: middle
    }

PNG项目符号点对齐

PNG bullet points alignment

html

css

png

html-lists