Как создать круглый значок для отображения номера, который зависит от размера шрифта?

Question

Есть ли способ создать круглый значок, чтобы показать число, на которое круглый значок и номер зависят от размера шрифта?

Я пробовал:

<input type="range" min="30" max="100" value="30" onchange="document.getElementById('d').style.fontSize=this.value+'px';"><br/>
<div id="d" style="position:relative;display:inline-block;font-size:30px;">
  <div style="position:relative;color:red;zoom:400%;">&#9679;</div>
  <div style="position:absolute;width:100%;height:100%;top:0px;left:0px;">
    <table style="position:absolute;width:100%;height:100%;top:0px;left:0px;text-align:center;font-size:inherit;">
      <tr><td>10</td></tr>
    </table>
  </div>
</div>

Ползунок обновит размер шрифта родительского div, поэтому также будут обновлены размер значка и номера.Это выглядит очень похоже на то, что я хочу, но у него есть проблема: текст всегда немного сдвигается вверх, независимо от того, как я устанавливаю поле и отступ.Есть ли способ исправить проблему визуального положения?Или есть подобный способ создать такой отзывчивый круглый значок с номером в центре?

Answer 1

Вы можете использовать flexbox, он отлично подходит для выравнивания вещей:

.badge {
  font-size: 48px;
  display: flex;
  align-content: center;
  text-align: center;
}
.badge p {
  font-size: 1em;
  background: red;
  color: white;
  border-radius: 50%;
  height: 2em;
  width: 2em;
  line-height: 2em;
}

<div class="badge">
<p>
1
</p>
</div>
<input type="range" min="30" max="100" value="30" onchange="document.querySelector('.badge').style.fontSize=this.value+'px';"><br/>

Answer 2

Вы можете немного упростить разметку и использовать настраиваемое свойство для изменения размера шрифта и красного круга, например

Codepen demo

---

Разметка

<input type="range" min="30" max="100" value="30" aria-controls="d">

<div id="d">
  <span>10</span>
</div>

CSS

:root { --size: 30px; }

#d { 
  font-size: var(--size);
  margin: 20px 0 0 0;
}

#d span {
  font-family: Arial;
  padding: 10px;
  height: var(--size);
  width: var(--size);
  border-radius: 50%;
  background-color: red; }

Javascript

var ctrl = document.querySelector('[aria-controls]');
var dde = document.documentElement;
ctrl.addEventListener('change',  function() {
   dde.style.setProperty('--size', this.value + 'px');
});

Answer 3

Для центрированного круга используйте эту центрированную пулю • вместо черного круга ●