如何创建一个圆形徽章来显示数字，它响应字体大小?

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

对于居中的圆圈，请使用此居中的项目符号•而不是黑色圆圈●

Answer 2

您可以使用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 3

您可以简化一点标记并使用自定义属性来更改字体大小和红色圆圈的大小，例如

代码笔演示

---

标记

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

爪哇语

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