我需要创建一个列表,其中包含一个自定义列表索引,该列表垂直居中于列表项的内容.
由于我已经使用flex,我认为最简单的可能是给列表项a display:flex;并设置样式.这很有效,但是由于list-item包含其他元素,因此它很快就搞定了.正如您在下面的示例中看到的那样.
什么是垂直居中列表索引的最佳方式？
- 更新示例 -
ol {
list-style: none;
padding: 0;
width: 200px;
}
ol > li {
display: flex;
margin-top: 20px;
align-items: center;
}
ol > li:before {
color: red;
content: attr(data-count)' ›';
flex display: block;
flex-shrink: 0;
text-align: right;
min-width: 24px;
padding-right: 5px;
}<ol>
<li data-count="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
<li data-count="10">Lorem ipsum dolor sit <span>amet</span>, consectetur adipisicing elit</li>
<li data-count="999">Lorem …