html - 居中 ul 的自定义元素符号

Question

如何水平排列 ul-List 的元素符号？它们就像在底部，我想把它们放在中间。

我使用的元素符号是 SVG。

我搜索了整个网络，但没有找到任何东西。

编辑 1:

这是我的代码(不多，但无论如何):

ul {
    list-style-image: url('newBullet.svg');
  }

编辑 2: 在这段代码之后:

li {
  list-style-type: none;
  background-image: url('http://www.w3schools.com/css/sqpurple.gif');
  background-repeat: no-repeat;
  background-position-y: 12px;

  padding-left: 20px;
}

它看起来像这样，当 li 元素中的文本为 2 行时(它位于两行的中间):

Answer 1

您可以使用背景图片并正确定位，而不是使用列表样式。像这样:

li {
  list-style-type: none;
  background-image: url('newBullet.svg');
  background-repeat: no-repeat;
  background-position-y: center;

  padding-left: 20px;
}

示例:https://jsfiddle.net/o2wyj5ey/

多行

如果您的列表项有多行，您绝对可以这样定位它们:

li {
  list-style-type: none;
  background-image: url('http://www.w3schools.com/css/sqpurple.gif');
  background-repeat: no-repeat;
  background-position-y: 3px;

  padding-left: 20px;
}

示例:https://jsfiddle.net/o2wyj5ey/1/