Номер позиции 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": relative для его родительского li и вы можете отрегулировать положение позиций сверху и слева.