Как создать круг с номером в центре, который масштабируется, чтобы соответствовать кругу в HTML/CSS?

Question

Существует множество решений для чисел в кругах, но они используют фиксированный размер. Как стилизовать круг div, чтобы он содержал центрированный текст или количество максимально возможных шрифтов, чтобы соответствовать кругу?

Answer 1

Я думаю, что этот код решает вашу проблему. Просто убедитесь, что размер шрифта и ширина родительского объекта одинаковы, (5 rem в этом примере).

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>