How to horizontally align the numbers of ol items to their contents

Issue

The numbers of the list are moving according to the text length of the li, causing the vertical align to drop. Notice that I have styles the numbers, as you can see in the fiddle.

I tried to use a span, but I couldn't get it working.

li span { 
    vertical-align: middle;
    display: inline-block;
}

<ol class="rounded-list center_ol">
    <li class="cool_white"><a href=""><span>Yannis Drogitis</span></a>
    </li>
    <li class="cool_white"><a href=""><span>Dimitris Mariglis</span></a>
    </li>
    <li class="cool_white"><a href=""><span>Kots Mariglis</span></a>
    </li>
</ol>

How to make the numbers align vertically, in respect to every other number in the list?

---

Not to be confused with this question: Left align ol numbers with the heading in the same “column”

Solution

As looking to your comments, i think this might help you, but one thing is bit sloppy here that is you need to mention specific width for <a> elements, if you try my solution.

Working : Fiddle

Snippet Below:

ol.rounded-list {
    counter-reset: li;
    /* Initiate a counter */
    list-style: none;
    /* Remove default numbering */
    *list-style: decimal;
    /* Keep using default numbering for IE6/7 */
    font: 15px'trebuchet MS', 'lucida sans';
    padding: 0;
    margin-bottom: 4em;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}
.rounded-list a {
    color: #444;
    text-decoration: none;
    display:block;
    width:125px;
    text-align:left;
    background:;
    margin:0px auto;
}
.rounded-list a:before {
    content: counter(li);
    counter-increment: li;
    position: relative;
    left: -1em;
    top: 64%;
    margin-top: -1.3em;
    background: rgba(255, 168, 76, 0.5);
    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;
}
.center_ol {
    text-align: center;
    list-style-position:inside;
    width:60%;
    margin:0px auto;
    border:1px solid red;
    
}

.cool_white
{
    position: relative;
    display: block;
    padding: .4em;
    border-radius: .3em;
    transition: all .3s ease-out;
    border:1px solid green;       
}

<h3 class="center_ol">Man-to-man suggestions</h3>

<ol class="rounded-list center_ol">
    <li class="cool_white"><a>Yannis Drogitis</a>

    </li>
    <li class="cool_white"><a>Dimitris Mariglis</a>

    </li>
    <li class="cool_white"><a>Kots Mariglis</a>

    </li>
</ol>

Answered By - divy3993