Question

我为编号列表找到了这种可爱的风格，但我想知道是否可以改进它以使数字与每个列表项的内容居中。谢谢！

http://codeitdown.com/ordered-list-css-styles/

ol.print-list {
    list-style-type: none;
    list-style-type: decimal !ie; /*IE 7- hack*/

    margin: 0;
    margin-left: 4em;
    padding: 0;

    counter-reset: li-counter;
}
ol.print-list > li{
    position: relative;
    margin-bottom: 20px;
    padding-left: 0.5em;
    min-height: 3em;
}
ol.print-list > li:before {
    position: absolute;
    top: 0;
    left: -1.33em;
    width: 1.2em;
    height: 1.2em;

    font-size: 2.5em;
    line-height: 1.2;
    text-align: center;
    color: #f5f5f5;

    border: 1px solid #c5c5c5;
    border-radius: 50%;
    background-color: #4CAF50;
    content: counter(li-counter);
    counter-increment: li-counter;
}

<ol class="print-list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ol>

https://jsfiddle.net/mx3m3avv/

Answer 1

你只需要添加一个行高：

ol.print-list > li{
    position: relative;
    margin-bottom: 20px;
    padding-left: 0.5em;
    min-height: 3em;
    line-height: 3em;
}

jsfiddle

在有序列表中垂直对齐样式化数字

1 个答案: