html - 垂直居中自定义列表元素符号

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。

但是，最可能更好的方法是对 :before 使用 display: block，我在片段 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 元素，因此更可预测其显示方式。 listItem 的 padding 创建文本和 :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;
}

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