html - 里的位置数

Question

我有一个样式列表，其中每个数字都是一个圆圈。此外，这个列表是居中的。我曾经改变 top 属性来定位 li 的编号。然而 - 因为这个列表已经经历了很多 - 现在这个属性乍一看似乎没有帮助。

问题是数字的圆圈没有与其 li 正确垂直对齐，正如您在这个 fiddle 中看到的那样.

CSS:

.rounded-list a:before {
    content: counter(li);
    counter-increment: li;
    position: relative;
    left: -1.3em;
    top: 50%;
    margin-top: -1.3em;
    background: rgba(255, 168, 76, 0.5);
    display:inline-block;
    height: 2em;
    width: 2em;
    line-height: 2em;
    border: .3em solid #fff;
    text-align: center;
    font-weight: bold;
    border-radius: 2em;
    transition: all .3s ease-out;
}

在图片中，您可以看到我希望数字圆圈所在的位置，关于它的 li。

请注意，出于演示目的，我必须将其向右移动一点。

Answer 1

我们可以通过放置 vertical-align:middle 来垂直居中对齐这些数字对于 .rounded-list a:before分类并删除 margin-top和 top:50%从此。

另一个解决方案是，我们可以对“.rounded-list a:before”类使用position absolute，对其父类li使用position:relative，你可以通过顶部和左侧调整数字位置。