li的位置号码

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列表一个：之前的”类和位置：相对其父里，你可以通过顶部和左侧调整编号位置。