css - 加符号行高

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 像素的位置使用特殊情况，或者您可以将正在使用的字体更改为+位于区域中心的字体。

Answer 2

这个小提琴是你要找的吗？添加此样式：

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