風格徽章的最佳技巧

Question

如何將風格的徽章舉例爲facebook通知？該值不需要一位數字。它可以是一兩個。在我的嘗試中，我也沒有看到如何以價值爲中心。

#counter { 
 
    display: block; 
 
    width: 18px; 
 
    height: 18px; 
 
    padding: 2px; 
 
    position: absolute; 
 
    font-size: 12px; 
 
    left: 0; 
 
    top: 10px; 
 
    background: red; 
 
    border-radius: 3px; 
 
    text-align: center; 
 
    color: #fff; 
 
}

<span id="counter">12</span>

嘗試將值更改爲1個位數，它不會再看看中心。它稍微偏離。

Answer 1

#counter { 
 
    display: block; 
 
    padding: 2px 4px; 
 
    position: absolute; 
 
    font-size: 12px; 
 
    left: 0; 
 
    top: 10px; 
 
    background: red; 
 
    border-radius: 3px; 
 
    text-align: center; 
 
    color: #fff; 
 
    line-height:18px; 
 
}

<span id="counter">111</span>

Answer 2

#counter { 
 
    display: block; 
 
    width: 18px; 
 
    height: 18px; 
 
    padding: 2px; 
 
    position: absolute; 
 
    font-size: 12px; 
 
    left: 0; 
 
    top: 10px; 
 
    background: red; 
 
    border-radius: 3px; 
 
    text-align: center; 
 
    color: #fff; 
 
    line-height:18px; 
 
}

<span id="counter">1</span>