如何垂直对齐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

我假设text-align: center 不是强制性的。只需从您的元素中删除此规则即可。

看到这个fiddle。

但是，如果您想要将元素居中，只需将所有元素包装在一个容器中 (div) - 并使用 translateX 对齐元素 center 而无需与 width 混淆尺寸。它也不依赖text-align: center 来定位元素。 Check out the fiddle here。

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 {
    position: relative;
    display: block;
    padding: .4em .4em .4em 2em;
    *padding: .4em;
    margin: .5em 0;
    color: #444;
    text-decoration: none;
    border-radius: .3em;
    transition: all .3s ease-out;
}
.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 {
    list-style-position:inside;
}

div {
    display: inline-block;
    position: relative;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

body {
    position: relative;
}

<div>
    <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>
</div>

Answer 2

它似乎继承了不需要的属性。来自 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

Answer 3

在查看您的 cmets 时，我认为这可能会对您有所帮助，但这里有点草率的是，如果您尝试我的解决方案，您需要提及 <a> 元素的特定宽度。

Working : Fiddle

片段如下：

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>

Answer 4

如果您像这样更改center_ol 规则，是另一种解决方法。

fiddle is here 的更新

h3.center_ol {
    text-align: center;
}
ol.center_ol {
    list-style-position:inside;
    display: table;
    margin: 0 auto;
}