加上符号线高度

Question

我正在尝试使用带圆圈的数字作为项目符号创建一个列表，最后一个项目符号是加号以添加更多项目。问题是加号的HTML实体不像数字那样垂直居中。

<li><span>1</span><a href="#">Item one</a></li>
<li><span>2</span><a href="#">Item two</a></li>
<li><span>+</span><a href="#">add item</a></li>

我对CSS非常强大，但似乎很奇怪，如果没有图像，没有办法实现这一点，我很接近放弃和诉诸。

Answer 1

从技术上讲，文本居中，只是+符号的顶部填充了一些空白区域，使其看起来偏移。但是，如果你查看数字的底部并将其与+进行比较，它们的位置是相同的。

要解决此问题，您可以使用+的特殊情况，在其中实际将其位置偏移几个Y像素，或者您可以将正在使用的字体更改为具有{{1位于该区域的中心。

Answer 2

这是Fiddle你正在寻找的吗？ 添加此样式：

span {
    background:#ffffff;
    width: 15px;
    height: 15px;
    border:2px solid #dddddd;
    border-radius:15px;
    padding:5px 9px;
    font-size: 12px;
}