align text in the middle of a circle with css

Question

i'm trying to align text in the middle of a circle with my below script but can't seem to get it to align in the middle both horizontally and vertically.

.circle {
  background: rgba(72, 156, 234, 1);
  background: -moz-linear-gradient(left, rgba(72, 156, 234, 1) 0%, rgba(31, 123, 229, 1) 100%);
  background: -webkit-gradient(left top, right top, color-stop(0%, rgba(72, 156, 234, 1)), color-stop(100%, rgba(31, 123, 229, 1)));
  background: -webkit-linear-gradient(left, rgba(72, 156, 234, 1) 0%, rgba(31, 123, 229, 1) 100%);
  background: -o-linear-gradient(left, rgba(72, 156, 234, 1) 0%, rgba(31, 123, 229, 1) 100%);
  background: -ms-linear-gradient(left, rgba(72, 156, 234, 1) 0%, rgba(31, 123, 229, 1) 100%);
  background: linear-gradient(to right, rgba(72, 156, 234, 1) 0%, rgba(31, 123, 229, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#489cea', endColorstr='#1f7be5', GradientType=1);
  border-radius: 50%;
  height: 80px;
  width: 80px;
  position: relative;
  box-shadow: 0 0 0 5px #F1F1F1;
  margin: 10px;
  color: #6F0;
  vertical-align: middle;
}

.text_circle {
  font-size: 36px;
  margin-bottom: 50px;
  vertical-align: middle;
}

<div align="center" class="circle">
  <span class="text_circle">5</span>
</div>

it doesn't matter if it's a circle or a rectangular.. this has been asked countless times since the dawn of the internet, please google it. — vsync, Jun 21 '17 at 11:01
@Nick If you are going to supply an answer in code, your answer needs to be posted here as you just now did, not a third party site that can change or disappear tomorrow. Second, code only answers are only throwing him a fish and not teaching him how to fish. This isn't reddit. Teach! — Rob, Jun 21 '17 at 11:07
Browsers haven't needed the vendor prefixes for this in several years. — Rob, Jun 21 '17 at 11:09
@Nick - you shouldn't have answered. you are contributing to a negative behavior of people asking before googling. you should have respect for this website and not try to get points just because you can. — vsync, Jun 21 '17 at 11:09
stupid questions deserve answers in the *comments section* and getting those points as answers is "dirty money" which a decent people wouldn't want to have. — vsync, Jun 21 '17 at 11:10
@Nick - well done. please do not contribute to stupid questions where people do not google first — vsync, Jun 21 '17 at 11:12
@vsync say the same things to everybody down here and start with the downvotes then ;) — Nick, Jun 21 '17 at 11:12
@Nick - sorry brother :) nothing personal. just like we wouldn't give money to a random person who never even tried to find a job before asking for a dollar for free... we mustn't help those who don't google first. (at least not as an answer, but a hint in the comments will do) — vsync, Jun 21 '17 at 11:15

score 1 · Accepted Answer · answered Jun 21 '17 at 11:02

As long as you only have one line of text, a simple trick is to set its line-height to the height of the circle:

.circle {
  background: rgba(72, 156, 234, 1);
  border-radius: 50%;
  height: 80px;
  width: 80px;
  position: relative;
  box-shadow: 0 0 0 5px #F1F1F1;
  margin: 10px;
  color: #6F0;
  vertical-align: middle;
}

.text_circle {
  font-size: 36px;
  margin-bottom: 50px;
  line-height: 80px;
}

<div align="center" class="circle"><span class="text_circle">5</span></div>

score 1 · Answer 2 · answered Jun 21 '17 at 11:05

There are two solutions for your question.

One

Assign position:relative property to .circle

.circle {
   position:relative;
}

add following properties to text_circle

.text_circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

Two

Assign line-height property to circle with same height.

.circle {
  line-height: 80px;
}

align text in the middle of a circle with css

2 Answers2

Linked