跨瀏覽器垂直居中圈內文本

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