Question

我和许多其他人一样，试图将一些自定义子弹垂直居中。我已经在SO上查看了很多其他问题，但我无法找到我正在寻找的解决方案。我不喜欢使用CSS background: url("...")的解决方案。我不想要的解决方案示例：

Vertical Align - List with "list-style-image"

这是我的代码：

<style type="text/css">
  li {
    position: relative;
    list-style-image: url("/images/bullet.png");
  }
  li>span {
    position: absolute;
    top: 24px;
    transform: translateY(-50%);
  }
</style>

<ul>
  <li><span>List item 1</span></li>
  <li><span>List item 2</span></li>
</ul>

它工作得很好，自动调整到文本的大小，但我有两个问题：

我必须在每个<span>

<li>

我必须将偏移硬编码一半的图像高度（我的示例图像是48px高，所以我使用top: 24px;）

我有两个问题：

这可以在不知道图像高度的情况下完成吗？
是否可以在每个<li>中没有内部元素的情况下实现相同的效果，只是文字？

请记住，我已经看过background: url("...")解决方案而且我不喜欢它。

Answer 1

尝试在 li：之前样式中添加自定义项目符号，而不是为每个LI添加跨度
虽然如果要显示完整图像，您需要知道图像的高度。

垂直居中的子弹图像

1 个答案: