如何使用flexbox垂直对齐列表的列表索引？

Question

我需要创建一个列表,其中包含一个自定义列表索引,该列表垂直居中于列表项的内容.

由于我已经使用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 ipsum dolor sit amet, consectetur adipisicing elit</li>
</ol>

Answer 1

在这种特殊情况下，解决方案可能是使用display:table，而不是 flex 。

\n\n

\r\n

\r\n

ol {\r\n  list-style: none;\r\n  padding: 0;\r\n  width: 200px;\r\n  display:table;\r\n  border-spacing:0 20px;\r\n}\r\n\r\nol > li {\r\n  display:table-row;\r\n  vertical-align:middle;     \r\n}\r\n\r\nol > li:before {\r\n  color: red;\r\n  content: attr(data-count)\' \xe2\x80\xba\';\r\n  display:table-cell;\r\n  vertical-align:middle;\r\n  text-align: right;\r\n  white-space: nowrap;\r\n  padding-right: 10px;\r\n}

\r\n

<ol>\r\n  <li data-count="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>\r\n  <li data-count="10">Lorem ipsum dolor sit <span>amet</span>, consectetur adipisicing elit</li>\r\n  <li data-count="999 99">Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>\r\n</ol>

\r\n

\r\n

\r\n

\n