跨度内的中心字符具有相同的宽度和高度

Question

我试图将字符置于span内。

CSS

span{border-radius:10px; width:20px; height:20px; color:#fff; background:#cc0000; text-align:center; line-height:20px; display:block;}

HTML

<span>+</span><br>
<span>-</span>

正如您所看到的，右下角的人物有点偏离。如何完美地居中对齐？

http://jsfiddle.net/5U7qj/

Answer 1

这是因为你的高度和宽度使用偶数值。由于字符的厚度仅为1个像素，因此在您将它们更改为2像素厚度或将width，height和line-height更改为奇数值之前，它会向外看。这是updated fiddle