如何实现带数字圆形标记的列表对齐与圆形内数字居中？

我尝试创建左侧带有内含数字圆形标记的列表，已实现圆形样式编辑，但无法使圆形与列表项正确对齐。此外，我希望确保圆形内的数字始终居中，以便后续复用该布局原理。

原代码 #

HTML代码 #

<ol class="circle"> 
  <li class="li">item</li> 
  <li class="li">item</li> 
  <li class="li">item</li> 
  <li class="li">item</li> 
</ol>

CSS代码 #

.circle {
    list-style: none;
    counter-reset: item;
    vertical-align: middle;
  }

.li {
    counter-increment: item;
    margin-left: 0.5em;
    margin-top: 3em;
    margin-bottom: 3em;
    vertical-align: middle;
  }

.circle > li:before {
    background-color: #a879e198;
    color: #a2a2a2 !important;
    content: counter(item);
    border-radius: 100%;
    margin-right: 1em;
    top: 50%;
    height: 3em;
    width: 3em;
    text-align: center;
    display:inline-block;
}

.circle > li:hover::before {
    box-shadow: 0 0 0 3px #a879e14b;
}

解决方法 #

1. 实现圆形与列表项垂直对齐 #

原代码中vertical-align: middle无法有效对齐，给<li>元素设置Flex布局，通过align-items: center可以精准实现圆形标记和列表文本的垂直居中对齐，同时简化间距控制逻辑。

2. 确保圆形内数字始终居中 #

有两种可靠方案：

• 给:before伪元素设置line-height值与圆形高度一致（即3em），结合text-align: center实现居中；
• 给:before伪元素启用Flex布局，通过justify-content: center和align-items: center实现居中，这种方案适配性更强，不受字体大小变化影响。

修改后的完整CSS代码 #

.circle {
    list-style: none;
    counter-reset: item;
    padding-left: 0; /* 移除默认列表内边距，避免多余缩进 */
  }

.li {
    counter-increment: item;
    margin: 3em 0; /* 合并上下边距，简化代码 */
    display: flex; /* 启用Flex布局 */
    align-items: center; /* 垂直居中对齐子元素 */
    margin-left: 0.5em;
  }

.circle > li:before {
    background-color: #a879e198;
    color: #a2a2a2;
    content: counter(item);
    border-radius: 100%;
    margin-right: 1em;
    height: 3em;
    width: 3em;
    /* 方案1：line-height + text-align 居中 */
    line-height: 3em;
    text-align: center;
    display: inline-block;

    /* 方案2：Flex居中（推荐，适配性更强）
    display: flex;
    justify-content: center;
    align-items: center;
    */
}

.circle > li:hover::before {
    box-shadow: 0 0 0 3px #a879e14b;
}

关键修改点说明 #

• 给.li添加display: flex和align-items: center，彻底解决圆形标记与列表文本的垂直对齐问题；
• 移除.circle和.li中无效的vertical-align: middle属性；
• 通过line-height或Flex布局实现圆形内数字的稳定居中；
• 给.circle添加padding-left: 0，清除默认列表内边距，避免布局偏移。

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