如何将列表项与子弹垂直对齐？

Question

所以我有一个带有自定义子弹图像的无序列表。它们是指向列表右侧的三角形。我希望该点与列表项中第一行文本的垂直中心对齐。我怎样才能做到这一点？

这是我目前正在查看的内容：

<ul>
                <li>Photography for events and portraits</li>
                <li>Image editing and restoration</li>
                <li>Video and audio production</li>
            </ul>

main ul {
    list-style-image: url(../img/bullet.png);
    margin-top: 25px;
}
main ul li {
    line-height: 35px;
}

行高似乎没有做任何事情。

Answer 1

实际上很难为您提供无法访问图像的最终代码，但请尝试将以下代码与您自己的代码合并。第一个Padding值（当前为3px）应该是您需要更新的项目。

li {
  background: url(images/bullet.gif) no-repeat left top;
  padding: 3px 0px 3px 10px;
  /* reset styles (optional): */
  list-style: none;
  margin: 0;
}

src：Adjust list style image position?

Answer 2

您可以使用伪元素before \ after，请看下面的示例：

main ul {
  margin-top: 25px;
}
main ul li {
  list-style: none;
}
main ul li:before {
  content: url("http://www.milksmarter.co.nz/images/basement_platform/grey_triangle_bullet_point_large.png");
  position: relative;
  top: 10px;
  left: -10px
}

<main>
  <ul>
    <li>Photography for events and portraits</li>
    <li>Image editing and restoration</li>
    <li>Video and audio production</li>
  </ul>
</main>