css - 跨浏览器垂直居中对齐圆圈内的文本

我正在尝试将文本居中放置在一个圆圈内，并且已经在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中的文字略微位于徽章顶部。如何在所有浏览器中使文本垂直居中？

注意：我将Mac与El Capitan的最新版本一起使用。

最佳答案

.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