如何在<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;
}

但子弹消失了：

所以我想问一下是否有任何方法可以在列表项中垂直居中而不影响子弹？

Answer 1

只有列表项有markers：

  

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

所以你需要list-item：

  

list-item关键字会导致元素生成   ::marker伪元素框，其内容由其指定   list-style属性（CSS 2.1§12.5 Lists）和a   指定类型的主框，用于其内容。

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

Answer 2

修改回答：

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

默认情况下，图标将根据行高垂直对齐。如果它大于行高，则最终会导致错误对齐。

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

或者将图标重新创建为与线条高度相同的高度，并尝试删除图像中的所有额外空间。

Answer 3

我终于解决了这个问题。刚刚使用了Font Awesome：http://fontawesome.io/examples/