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

Question

I have the following HTML to show notifications on a website. I want the number to be centered in the red circle. Also I want the whole div to be a href

I tried using the following CSS. Also please suggest how to approach such a problem. I'm completely new to frontend programming.

 .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

You can try this:

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

Answer 2

Use this 

    <a href="#">
      <i class="fa fa-inbox fa-2x"></i> 
      <div class="btn btn-circle">
        <span class="txt">10</span>
        </div>
      </a>
and in style 

    <style>
    .txt 
    {
    display:table-cell;
    vertical-align:middle;
    text-align:center;
    }
    .btn-circle
    {
    width: 30px;
    height: 30px;
    text-align: center;
    background: red;
    border-radius: 50%;
    display:table-cell;
    }
    </style>

Answer 3

Use this code:

HTML:

<a href="#"> 
      <div>
        <i class="fa fa-inbox fa-2x">
          <span class="btn btn-circle txt">
            <span class="count">10</span>
          </span>
        </i> 
      </div>
    </a>

CSS:

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

.count {
  font-size: 15px;
  vertical-align: center;
  position: relative;
  top: -5px;
}

Hope this helps....