如何将文本置于字体 - 令人敬畏的圆圈内

Question

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

你可以这样做

＆＃13;

＆＃13;

.circle-stack {
  display: inline-block;
  position: relative;
}

.fa-circle-thin,
.points-indicator {
  position: absolute;
  top: 0;
  left: 0;
}

.fa-circle {
  font-size: 16px;
  color: #c0cff6;
}

.points-indicator {
  color: #1f0e3e;
  font-weight: bold;
  font-size: 10px;
  line-height: 16px;
  display: inline-block;
  width: 100%;
  text-align: center;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

你也可以不使用font awesome图标。

诀窍是使用css

将项目设置在circle-stack类中

top:50%;
left:50%;
transform:translateX(-50%) translateY(-50%);

以上是上述代码的fiddle link

预览

我更改了span和a标记的顺序，因为points-indicator类已应用于span。 您可以在{span}范围内使用text-decoration:none标记来删除下划线。

Answer 3

我认为不需要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>