如何将<ol>中<li>的编号垂直居中对齐？

方案：CSS计数器 + Flex布局 #

原生列表的::marker伪元素垂直位置控制受限，改用自定义计数器配合Flex布局可以轻松实现编号与内容的垂直居中对齐。修改后的完整CSS代码如下：

#ScoresList {
  margin: 0 0 0 25px;
  list-style: none; /* 移除原生编号 */
  counter-reset: score-counter; /* 初始化计数器 */
}

#ScoresList li {
  margin: 20px 0 0 20px;
  background-color: var(--normal-background);
  text-align: left;
  display: flex;
  align-items: center; /* 垂直居中对齐编号与内容 */
  gap: 10px; /* 编号和内容的间距，可自行调整 */
  counter-increment: score-counter; /* 每次渲染li时递增计数器 */
}

/* 自定义编号样式，可按需调整 */
#ScoresList li::before {
  content: counter(score-counter) ".";
  /* 可选：添加额外样式，比如加粗、变色 */
  /* font-weight: bold; */
  /* color: #444; */
}

.ScoreItem {
  display: grid;
  grid-template-rows: 30px auto;
  grid-template-columns: 1fr 1fr;
  grid-gap: 5px;
  flex: 1; /* 让内容区域占满li的剩余宽度 */
}

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

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

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

原理说明 #

• 用list-style: none移除原生编号，通过counter-reset和counter-increment实现自定义有序编号，完全可控样式与位置
• 将<li>设为flex容器，align-items: center让编号（伪元素）与内容区域在垂直方向居中对齐
• 给.ScoreItem加flex: 1，确保内容区域能占满<li>剩余宽度，避免布局挤压错乱

内容的提问来源于stack exchange，提问作者Jorne