How to create a circle with a number in the center that scales to fit the circle in HTML/CSS?

4.5k Views Asked by At

There are many solutions for numbers in circles, but they use fixed sized. How to style the circle div for it to contain centered text or number of largest possible font to fit the circle?

1

There are 1 best solutions below

0
On BEST ANSWER

I think this code solves your problem. Just make sure the font-size and the width of the parent is same, (5 rem in this example).

div{
  font-size: 5rem;
  width: 5rem;

  background-color: aquamarine;
  padding: 1rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}
<div>5</div>