html - 如何在 Font Awesome 圆圈内居中放置文本

Question

我在下面有 css/html，我想将圆圈内的文本居中。如果只有一位数字，我可以计算出正确的 margin ，但我希望它始终有效，即使有两位或三位数字。有人对此有好的解决方案吗？

.circle-stack {
    position: absolute;
    display: inline-block;
    width: 10px;
    height: 10px;
    top: 25px;
    left: 5px;
}
		
.fa-circle-thin,
.points-indicator {
    position: absolute;
}
.fa-circle{
  font-size: 16px;
  color: #c0cff6;
}

.points-indicator {
  color: #1f0e3e;
  font-weight: bold;
  top: 1px;
  left: 4px;
  width: 5px;
  height: 5px;
  font-size: 10px;
  line-height: 16px;
  text-align: center;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="circle-stack">
  <i class="fa fa-circle" aria-hidden="true"></i>
  <a href="/notifications" title="Unread notifications"><span class="points-indicator">10</span></a>
</div>

Answer 1

我认为不需要 Font Awesome 库。你可以简单地这样做:

.circle{
  width:100px;
  height:100px;
  border-radius:50%;
  box-sizing:border-box;
  text-align:center;
  display:inline-block;
  line-height:100px;
  background-color:#000;
}
.circle a{
  text-decoration:none;
  color:#fff;
  font-size: 30px;
}

<div class="circle">
  <a href="#">10</a>
</div>
<div class="circle">
  <a href="#">100</a>
</div>
<div class="circle">
  <a href="#">1000</a>
</div>