Html 如何垂直对齐ol的编号？

列表的编号根据

li

的文本长度移动，导致垂直对齐下降。请注意，正如您在中所看到的，我有一些数字样式

我试着用一个span，但没能让它工作

CSS

HTML

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

---

---

不要与这个问题混淆：

我假设

文本对齐：居中

不是强制性的。只需从元素中删除此规则

看这个

但是，如果确实要将元素居中，只需将所有元素包装在一个容器中（

div

），然后使用

translateX

对齐元素

居中

，而无需弄乱

宽度

大小。它也不依赖

text align:center

来定位元素

ol.rounded-list{
计数器复位：li；
/*启动计数器*/
列表样式：无；
/*删除默认编号*/
*列表样式：十进制；
/*继续使用IE6/7的默认编号*/
字体：15px“投石机MS”，“lucida sans”；
填充：0；
边缘底部：4em；
文本阴影：0 1px 0 rgba（255、255、255、.5）；
}
.四舍五入名单a{
位置：相对位置；
显示：块；
填充：.4em.4em.4em.2em；
*填充：.4em；
边缘：.5em0；
颜色：#444；
文字装饰：无；
边界半径：.3em；
过渡：全部。3放松；
}
.四舍五入名单a：之前{
内容：柜台（李）；
反增量：李；
位置：相对位置；
左：-1米；
最高：64%；
保证金顶部：-1.3em；
背景：rgba（255,168,76,0.5）；
高度：2米；
宽度：2米；
线高：2米；
边框：.3em实心#fff；
文本对齐：居中；
字体大小：粗体；
边界半径：2米；
过渡：全部。3放松；
}
.center_ol{
列表样式位置：内部；
}
div{
显示：内联块；
位置：相对位置；
左：50%；
-webkit转换：translateX（-50%）；
转化：translateX（-50%）；
}
身体{
位置：相对位置；
}

人对人的建议
Yannis Drogitis

迪米特里斯·马里格利斯

科茨马里格利斯酒店

它似乎继承了不需要的属性。来自李。酷·白。我通过Irshad建议的链接实现了这些CSS库

更新

我已经修改了我的旧代码。我创建了一个名为

.outer

的新类，而不是

body

，其中此处的任何元素都将居中，外部的任何元素都不会居中

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

.outer {
    text-align:center;
}

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

---

关于您的评论，我认为这可能会对您有所帮助，但这里有一点马虎，那就是您需要提到

的特定宽度

下面的片段：


ol.rounded-list{
计数器复位：li；
/*启动计数器*/
列表样式：无；
/*删除默认编号*/
*列表样式：十进制；
/*继续使用IE6/7的默认编号*/
字体：15px“投石机MS”，“lucida sans”；
填充：0；
边缘底部：4em；
文本阴影：0 1px 0 rgba（255、255、255、.5）；
}
.四舍五入名单a{
颜色：#444；
文字装饰：无；
显示：块；
宽度：125px；
文本对齐：左对齐；
背景：；
保证金：0px自动；
}
.四舍五入名单a：之前{
内容：柜台（李）；
反增量：李；
位置：相对位置；
左：-1米；
最高：64%；
保证金顶部：-1.3em；
背景：rgba（255,168,76,0.5）；
高度：2米；
宽度：2米；
线高：2米；
边框：.3em实心#fff；
文本对齐：居中；
字体大小：粗体；
边界半径：2米；
过渡：全部。3放松；
}
.center_ol{
文本对齐：居中；
列表样式位置：内部；
宽度：60%；
保证金：0px自动；
边框：1px纯红；
}
.酷白
{
位置：相对位置；
显示：块；
填充：.4em；
边界半径：.3em；
过渡：全部。3放松；
边框：1px纯绿色；
}
人对人建议
Yannis Drogitis

迪米特里斯·马里格利斯

科茨马里格利斯酒店

如果您像这样更改您的
中心规则，这是另一种解决方法

更新您的

这是一个类似的问题。希望你喜欢。（y） 这不是我在@Irshad所做的相同尝试吗？我正在调查-几分钟后，是的，它没有成功/@gsamaras你的意思是？像这样？@divy3993列表没有居中。这很好。但是，我只希望列表居中，而不是整个
正文。你能做些什么吗？这个列表不再在中间。@gsamaras将小提琴更新为-它现在将水平居中放置，而不使用
text align:center
@shubhamr238答案中包含代码，不需要外部链接-单击“显示代码段”，您的解决方案非常好。在哪种情况下，这个草率的点会伤害我？很高兴它帮助了您。我在这里的意思是，你需要给出具体的
宽度
，如果你不这样做，那就没有用了。没别的了。哦，好的，迪弗。顺便说一句，我有一个艰难的时间与此：。如果你愿意，看看！
<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>

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

.outer {
    text-align:center;
}

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

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