垂直对齐有序列表中的样式数字

Question

I found this lovely style for numbered lists but I would like to know if it can be improved to center the numbers with the content of each list item. Thanks!

http://codeitdown.com/ordered-list-css-styles/

ol.print-list {
    list-style-type: none;
    list-style-type: decimal !ie; /*IE 7- hack*/

    margin: 0;
    margin-left: 4em;
    padding: 0;

    counter-reset: li-counter;
}
ol.print-list > li{
    position: relative;
    margin-bottom: 20px;
    padding-left: 0.5em;
    min-height: 3em;
}
ol.print-list > li:before {
    position: absolute;
    top: 0;
    left: -1.33em;
    width: 1.2em;
    height: 1.2em;

    font-size: 2.5em;
    line-height: 1.2;
    text-align: center;
    color: #f5f5f5;

    border: 1px solid #c5c5c5;
    border-radius: 50%;
    background-color: #4CAF50;
    content: counter(li-counter);
    counter-increment: li-counter;
}

<ol class="print-list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ol>

https://jsfiddle.net/mx3m3avv/

Answer 1

you just had to add a line-height to:

ol.print-list > li{
    position: relative;
    margin-bottom: 20px;
    padding-left: 0.5em;
    min-height: 3em;
    line-height: 3em;
}

jsfiddle