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基础。

更新

我修改了旧代码。而不是body我创建了一个名为.outer的新类，其中此处的任何元素都将居中，而外部的任何元素都不会。

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

.outer {
    text-align:center;
}

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

Updated Results

Answer 2

如果您更改此类center_ol规则，则是另一种解决方法。

fiddle is here

的更新

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

Answer 3

我假设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 4

在查看您的评论时，我认为这可能会对您有所帮助，但有一件事情有点松散，您需要提及<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>

如何垂直对齐ol的数量？

4 个答案: