风格徽章的最佳技巧

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;