跨浏览器垂直居中圆圈内的文本

Question

我正在尝试使文本在一个圆圈内居中，并且在 webkit 浏览器中已成功完成，但在 Firefox 中不成功。这是我目前所拥有的：http://codepen.io/anon/pen/qZqYdb

这是我的标记：

<span class="quantity-badge">10</span>

这是我的风格：

.quantity-badge {
    display: table-cell;
    width: 24px;
    height: 24px;
    text-align: center;
    vertical-align: middle;
    color: #fff;
    border-radius: 50%;
    background-color: #0896ea;
}

我将显示属性设置为table-cell，这样添加 3 位数字会使徽章保持圆形。

如果您比较 Chrome 和 Firefox 中的演示，您会注意到 Firefox 中的文本稍微靠近徽章的顶部。如何在所有浏览器中垂直居中文本？

注意：我使用的是装有最新版本 El Capitan 的 Mac。

Answer 1

.quantity-badge {
  display: block; /*Changed this*/
  width: 24px;
  height: 24px;
  line-height:24px; /*Added this*/
  padding:10px; /*Added this*/
  text-align: center;
  vertical-align: middle;
  color: #fff;
  border-radius: 50%;
  -webkit-border-radius: 50%; /*Added this*/
  background-color: #0896ea;
}

我希望这可以开始帮助你。这是您发布的代码的一个分支：http://codepen.io/anon/pen/EKNevV

Answer 2

在我的 Firefox (38.7.0) 和 Chrome (49.0.2623.87) 版本中，它们看起来是一样的。

Firefox

Chrome