html - 如何垂直对齐ol的数字？

Question

列表的数字根据 li 的文本长度移动，导致垂直对齐下降。请注意，我为数字设置了样式，正如您在 fiddle 中看到的那样.

我尝试使用跨度，但无法正常工作。

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>

如何使数字相对于列表中的所有其他数字垂直对齐？

---

不要与这个问题混淆:Left align ol numbers with the heading in the same “column”

Answer 1

它似乎继承了不需要的属性。来自 li.cool_white。我从 Irshad 建议的链接中实现了这些 CSS 基础。

已更新

我已经修改了我的旧代码。我创建了一个名为 .outer 的新类，而不是 body，这里的任何元素都将居中，而外面的任何元素都不会居中。

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

.outer {
    text-align:center;
}

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

Updated Results