HTML list with number/circles, text aligment inside circles

Question

I am trying to create a list with circles at the left side of the list with numbers inside. I got it work and can edit the circle styling, but I don't get it aligned right with the list items. Heres the 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>

And the 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;
}

Result in the fiddle: https://jsfiddle.net/5owe2371/10/

How I get the circles align with the text or number inside the circle always in the middle of circle? Latter might be even better to apply same principle later in other ways.

Answer 1

Here is the solution.

.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;
    height: 3em;
    width: 3em;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

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

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

Answer 2

Easy you just need to add 2 lines to this class

.circle > li:before {
    ...
    vertical-align: middle;
    line-height: 3em;
}