如何在不影响列表符号的情况下垂直居中<li>中的文本？

Question

我正在尝试构建一个简单的网站，HTML代码如下：

<ul>
    <li class="l1">Test item 1</li>
    <li class="l2">Test item 2</li>
</ul>

您可以看到文本与项目符号不对齐。 这是我尝试过的方法：

ul{
  display: table;
}

并且

li{
  display: table-cell;
  text-align:middle;
}

但是这些子弹点消失了： 因此，我想问是否有任何方法可以在不影响子弹点的情况下垂直居中列表项中的文本？

- Wulipapa

---

请问您能否提供一个演示，展示一下对齐出现了问题吗？ - kukkuz

你能否为此制作一个 jsfiddle，或者你可以使用 text-align:center;。 - Parveen Sachdeva

你能澄清一下你想要相对于什么居中吗？是文本内容相对于 li 居中？还是 li 相对于 ul 居中？ - Oriol

我尝试澄清我的需求，希望它足够清晰。 - Wulipapa

好的，现在清楚了，但是如何显示这些图标？ - Oriol

我使用具有list-style-image属性的本地图像。 - Wulipapa

Answer 1

只有列表项才有标记：

::marker 伪元素表示列表项的自动生成标记框。（请参见display: list-item。）

因此您需要list-item：

list-item关键字会导致元素生成一个::marker伪元素框，其中包含由其list-style属性指定的内容（CSS 2.1§12.5 Lists），以及一个用于自身内容的指定类型的主要框。

CSS Display 3引入了一些list-item的变体：

list-item block flow
list-item block flow-root
list-item inline flow
list-item inline flow-root
list-item run-in flow
list-item run-in flow-root

但似乎没有浏览器支持，所以最好使用旧的display: list-item。

因此，如果您使用display: inline-block或display: table-cell，标记会消失。

如果您想垂直对齐标记，CSS Lists and Counters drafts提供了解决方案。

li::marker {
  display: inline-block;
  vertical-align: middle;
}

然而，目前不要指望任何浏览器支持此功能。相反，我建议隐藏标记并使用::before伪元素代替：

ul {
  list-style: none;
  padding-left: 0;
}
li::before {
  content: url('image.ico');
  display: inline-block;
  vertical-align: middle;
}

请注意，行为将类似于使用list-style-position: inside，如果列表项有换行符可能看起来不正确。如果您想模拟list-style-position: outside，可以尝试使用绝对定位。

- Oriol

---

list-style-position: inside 在我的情况下起作用了。 - Matias Haeussler

Answer 2

修订答案：

从您提供的图片来看，问题可能出在图标上。如果您重新裁剪图像并减少底部的空白，它可能会正确对齐。

默认情况下，图标将根据行高垂直对齐。如果它比行高大，则会出现不正确的对齐。

尝试调整CSS中li的行高，使其与图标的高度相同。如果图标底部有空白，请将其裁剪掉。

或者重新创建您的图标，使其与行高相同，并尝试删除图像中的所有额外空间。

- Paul Sandel

---

这会水平居中，而不是垂直居中。 - Oriol