如何创建一个中心带有数字的圆圈,该圆圈可以缩放以适合 HTML/CSS 中的圆圈?
How to create a circle with a number in the center that scales to fit the circle in HTML/CSS?
圆圈中的数字有很多解决方案,但它们使用固定大小。如何设置圆圈的样式 div 以使其包含居中文本或适合圆圈的最大可能字体数?
我认为这段代码可以解决您的问题。只需确保 font-size 和父级的宽度相同(本例中为 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>
圆圈中的数字有很多解决方案,但它们使用固定大小。如何设置圆圈的样式 div 以使其包含居中文本或适合圆圈的最大可能字体数?
我认为这段代码可以解决您的问题。只需确保 font-size 和父级的宽度相同(本例中为 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>