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

Question

我需要使用自定义列表索引创建一个列表，该列表垂直居中于列表项的内容。

由于我已经使用flex，我认为最简单的方法是给列表项display:flex;并设置样式。这很有效，但是很快，因为列表项包含其他元素，它就搞砸了。您可以在下面的示例中看到。

垂直居中列表索引的最佳方法是什么？

- 更新了示例 -

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我认为最好的选择是将li中的所有元素包装在另一个元素中，这样可以解决问题。

＆＃13;

＆＃13;

ul {
  list-style: none;
  padding: 0;
  width: 200px;
}
ul > li {
  display: flex;
  margin-top: 20px;
  align-items: center;
}
ul > li:before {
  color: red;
  content: '›';
  flex display: block;
  flex-shrink: 0;
  text-align: center;
  width: 30px;
}

＆＃13;

<ul>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
  <li>
    <p>Lorem ipsum dolor sit <span>amet</span>, consectetur adipisicing elit</p>
  </li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

＆＃13;

＆＃13;

ol {
  list-style: none;
  padding: 0;
  width: 200px;
  display:table;
  border-spacing:0 20px;
}

ol > li {
  display:table-row;
  vertical-align:middle;     
}

ol > li:before {
  color: red;
  content: attr(data-count)' ›';
  display:table-cell;
  vertical-align:middle;
  text-align: right;
  white-space: nowrap;
  padding-right: 10px;
}

＆＃13;

<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 99">Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
</ol>

＆＃13;

＆＃13;

＆＃13;

Answer 3

这是一种绝对定位的方法，可以使箭头保持垂直居中。

ol {
  list-style: none;
  padding: 0;
  width: 200px;
}

ol > li {
  margin: 20px 0 0;
  padding-left: 36px;
  position: relative;
}

ol > li:before {
  color: red;
  content: attr(data-count)' ›';

  font-size: 14px;
  line-height: 1;
  
  position: absolute;
  left: 0;
  top: 50%; /* vertically center */
  margin-top: -7px; /* and shift up based on 16px height */
}

<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>