如何将<li>中的<ol>的数字垂直放置在中心？

Question

我正在设计，但我希望数字垂直居中对齐，我已经在这个问题上坚持了一个多小时了。

#ScoresList {
  margin: 0 0 0 25px;
  list-style-position: inside;
  /*Opgezocht*/
}

#ScoresList li {
  margin: 20px 0 0 20px;
  background-color: var(--normal-background);
  text-align: left;
}

.ScoreItem {
  display: grid;
  grid-template-rows: 30px auto;
  grid-template-columns: 1fr 1fr;
  grid-gap: 5px;
}

.ScoreItem__Score {
  grid-area: 1 / 1 / 2 / 2;
}

.ScoreItem__Date {
  grid-area: 1 / 2 / 2 / 3;
}

.ScoreItem__Details {
  grid-area: 2 / 1 / 3 / 3;
}

<ol id="ScoresList">
  <li>
    <div class="ScoreItem">
      <p class="ScoreItem__Score">Score: <span>2500</span></p>
      <p class="ScoreItem__Date">On: <span>25/03/2024</span></p>
      <details class="ScoreItem__Details">
        <summary>More details</summary>
        <p>score</p>
        <p>tijd</p>
        <p>aantal fouten</p>
        <p>foutpercentage</p>
        <p>datum</p>
      </details>
    </div>
  </li>
</ol>

我已经尝试了很多，即使使用

li::marker

等，但我就是无法让数字移动，只有当我这样做

text-align: center

时，它才会将其水平移动到中心，而不是垂直移动。

Answer 1

您可以使用

:before

删除默认列表编号并创建自己的列表编号。这样，您就可以完全按照自己的意愿设计样式；

#ScoresList {
  margin: 0 0 0 25px;
  list-style: none;
  counter-reset: item;
}

#Scoreslist li {
    margin: 20px 0 0 20px;
    background-color: var(--normal-background);
    text-align: left;
    counter-increment: item;
    position: relative;
}

#Scoreslist li:before {
    content: counter(item);
    display: block;
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%);

}