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-list a：before”class和position：relative for parent li，你可以按上下左右调整数字位置。