バッジのスタイルに最適なテクニック

Question

facebook通知などのカウンターバッジをどのようにスタイルするのですか？値は1桁である必要はありません。 1つでも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; 
 
}

<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>