html - 将数字垂直对齐到固定高度的居中列表项

Question

我有一个有序列表中的列表项，它们具有固定的高度并且垂直居中。我的问题是，数字的位置有点偏离。

li {
  height: 80px;
  border: 1px solid black;
}

li > span {
  height: 80px;
  display: table-cell;
  vertical-align: middle;
}

<ol>
  <li><span>Some short text</span></li>
  <li><span>Some other random text which is much longer than the first one. Unfortunality all the numbers are not really aligned with the text. For longer text it's even worse, as you probably can see in this example.</span></li>
  <li><span>My number is a bit to far down there</span></li>
</ol>

我希望数字与列表项文本的开头对齐，如下所示:

我该怎么做？

Answer 1

使用 counter 并依靠负 text-indent 将其推到外面:

lo {
  counter-reset: num;
}

li {
  min-height: 80px;
  border: 1px solid black;
  counter-increment: num;
  list-style:none;
}

li>span {
  height: 80px;
  display: table-cell;
  vertical-align: middle;
  text-indent:-1em;
}

li>span::before {
  content: counter(num) ". ";
}

<ol>
  <li><span>Some short text</span></li>
  <li><span>Some other random text which is much longer than the first one. Unfortunality all the numbers are not really aligned with the text. For longer text it's even worse, as you probably can see in this example.</span></li>
  <li><span>My number is a bit to far down there</span></li>
</ol>