align text in the middle of a circle with css [duplicate] - html

Question

This question already has answers here:
How to draw a circle with text in the middle?
(19 answers)
How do I vertically center text with CSS? [duplicate]
(37 answers)
Closed 5 years ago.
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>

Answer 1

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>

Answer 2

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