如何在 <li> 中垂直居中文本而不影响列表项目符号？

Posted 2023-02-18

【中文标题】如何在 <li> 中垂直居中文本而不影响列表项目符号？

【英文标题】：How do I vertically center the text in a <li> without affecting the list bullet?

【发布时间】：2017-01-11 12:05:50

【问题描述】：

我正在尝试建立一个简单的网站，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;

但是子弹消失了：

所以我想问一下是否有任何方法可以使列表项中的文本垂直居中而不影响项目符号？

【问题讨论】：

能否请您给我们一个显示错位的演示？

你能不能为此做一个 jsfiddle 或者你可以使用 text-align:center;

你能澄清一下你想要相对于其他什么居中吗？文字内容相对于li? li 相对于 ul?

我试图澄清我的要求，希望它足够清楚。

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

【参考方案1】：

只有列表项有 markers:

::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，你可以试试绝对定位。

【讨论】：

list-style-position: inside 在我的案例中工作

【参考方案2】：

修改后的答案：

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

默认情况下，图标将根据行高垂直对齐。如果它大于行高，则最终对齐不正确。

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

或者将您的图标重新创建为与行高相同的高度，并尝试删除图像中所有多余的空间。

【讨论】：

这个水平居中，而不是垂直居中。