垂直居中自定义列表项目符号

Question

我用自定义的unicode替换了默认列表项目符号。

.listItem {
  list-style: none;
}

.listItem:before {
  content: '\25A0';
}

<ul>
  <li class="listItem">
    <a>
       A Link
    </a>
  </li>
</ul>

我的问题是如何使此自定义项目符号居中？我尝试了vertical-align:middle，但这没有帮助。

Answer 1

在使用字符时，我唯一想到的就是使用position: relative来定位char。

但是，最好的方法是将display: block用于:before，如我在代码段2中所示。

片段1

.listItem {
  list-style: none;
}

.listItem:before {
  position: relative;
  bottom: 2px;
  content: '\25A0';
}

<ul>
  <li class="listItem">
    <a>
       A Link
    </a>
  </li>
</ul>

摘要2

此方法基于我们提供尺寸的:before元素，因此更容易预测其显示方式。 padding的{​​{1}}在文本和listItem元素之间创建距离。精确值可以调整。

:before

.listItem {
  position: relative;
  list-style: none;
  padding: 0 0 0 12px;
}

.listItem:before {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
  display: block;
  content: '';
  height: 7px;
  width: 7px;
  background: #000000;
}

Answer 2

SVG答案：

li {
    list-style-type: none
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><circle style="fill:#A7A7A7;" cx="10" cy="10" r="5"/></svg>')
    background-repeat: no-repeat
    background-position-y: center
    padding-left: 2rem
}