Html 在具有相同宽度和高度的跨距内居中字符

我正在尝试将

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>

+

-

如您所见，右下角的字符有点偏了。如何将其完全居中对齐

---

这是因为您对高度和宽度使用了偶数值。由于字符的厚度只有1个像素，因此在将其更改为2个像素的厚度或将

宽度

、

高度

和

行高

更改为奇数值之前，它将一直处于关闭状态。这是一个

在Chrome上看不到问题，您希望看到什么？我也在Win 8的Chrome上，看看图片，右下角的字符有点太多了。当“-”明显代表负号时，你应该使用真正的负号−” 相反（在HTML中使用

&减号；

），它的属性不同于“-”连字符-减号，所以你应该在微调渲染之前获得正确的字符。看起来对

+

是正确的，但是

-

仍然没有正确居中。奇怪的是，它在Chrome中居中。你在使用什么浏览器？不！著名的1px错误。同样的事情是，33%的宽度，浏览器不需要小数来转换它33.3333%，谢谢m8@MatthewR.我试过Opera和Chrome（34）的最新版本，它们都是一样的，这里的快照啊，这可能是你字体的别名问题。试试18px的行高，看看能不能解决这个问题。