배지 스타일을 지정하는 가장 좋은 방법

Question

페이스 북 알림과 같은 카운터 배지 스타일을 어떻게 지정 하시겠습니까? 값은 한 자리 일 필요는 없습니다. 그것은 하나 또는 둘 수 있습니다. 또한 내 시도에서 나는 가치를 중심으로 할 수있는 방법을 알지 못한다.

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

한 자리에 값을 변경하려고

, 다시 센터를 보이지 않는다. 약간 벗어났습니다.

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>