Align text to the center on a red circle with a icon below it in 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>

Does this answer your question? [Easiest CSS for "red circle" notification badge with count](https://stackoverflow.com/questions/5747863/easiest-css-for-red-circle-notification-badge-with-count) — Inigo, Mar 11 '22 at 12:45

score 0 · Answer 1 · answered Aug 10 '15 at 07:44

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>

score 0 · Answer 2 · answered Aug 10 '15 at 07:52

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>

score 0 · Answer 3 · answered Aug 10 '15 at 08:02

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

Align text to the center on a red circle with a icon below it in HTML

3 Answers3