How to vertically align numbers of ol?

Question

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.

CSS

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

HTML

<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”

Answer 1

It seems it was inheriting unwanted properties. from li.cool_white. I implemented these CSS base from the link suggested by Irshad.

Updated

I have modified my old code. Instead of body I have created a new class called .outer where any element here would be centered and anything outside would not be.

.center_ol {
    text-align: left;
    list-style-position:inside;
}

.outer {
    text-align:center;
}

.list{
    display: inline-block;
    text-align: left;
}

Updated Results