html - 将文本对齐到红色圆圈的中心，在 HTML 中其下方有一个图标

Question

我有以下 HTML 用于在网站上显示通知。我希望数字以红色圆圈为中心。我还希望整个 div 成为一个 href

我尝试使用以下 CSS。另请建议如何解决此类问题。我对前端编程完全陌生。

.txt {
  position: absolute;
  top: 4px;
  left: 25px;
}
.btn-circle {
  width: 30px;
  height: 30px;
  text-align: center;
  background: red;
  border-radius: 50%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css" rel="stylesheet" />
<div>
  <i class="fa fa-inbox fa-2x"></i> 
  <a href="#" class="btn btn-circle txt">
    <div class="count">10</div>
  </a>
</div>

Answer 1

你可以试试这个:

.txt {
  position: absolute;
  top: 4px;
  left: 25px;
}
.btn-circle {
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background: red;
  border-radius: 50%;
  text-decoration:none;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css" rel="stylesheet" />
<div>
  <i class="fa fa-inbox fa-2x"></i> 
  <a href="#" class="btn btn-circle txt">
    10
  </a>
</div>