如何始终保持我的父母为圆形？答案

【问题标题】：How to keep always my parent as circle shape?如何始终保持我的父母为圆形？
【发布时间】：2018-12-25 23:01:22
【问题描述】：

在我的圈子里，我可能需要无限制地放置数字。为此，我尝试创建一个 div 并添加了 css。但不符合我的预期。

如何让我的 div 始终是一个圆圈，仍然放置任何文本？

div{
  border:1px solid red;
  display: inline-block;
  border-radius:50%;
}

<div>10</div>
<div>1</div>
<div>888</div>

【问题讨论】：

How to use CSS to surround a number with a circle?的可能重复
可以使用这个响应，有点类似。 stackoverflow.com/a/16615584/7041244
@Esko - 宽度是固定的。我正在寻找动态添加的任何数字以保持形状
@user2024080 那里也有答案，我只是滚动浏览那里的答案。

标签： html css

【解决方案1】：

这对我有用。保持宽度的一半填充可以解决这个问题

div{
 width:10%;height:0;font-size:20px;color:#fff;text-align:center;line-height:0;padding:5% 0;border-radius:50%;background:#09f
}

<div>33</div>
<div>1</div>
<div>888</div>

【讨论】：

【解决方案2】：

像这样，也许有最小的宽度和高度

.numberCircle {
    display:inline-block;

    border-radius:50%;
    border:2px solid;

    font-size:32px;
}

.numberCircle:before,
.numberCircle:after {
    content:'\200B';
    display:inline-block;
    line-height:0px;

    padding-top:50%;
    padding-bottom:50%;
}

.numberCircle:before {
    padding-left:8px;
}
.numberCircle:after {
    padding-right:8px;
}

<span class="numberCircle">30</span>
<span class="numberCircle">1</span>
<span class="numberCircle">5435</span>
<span class="numberCircle">2</span>
<span class="numberCircle">100</span>

【讨论】：

你能解释一下这个计算背后的登录吗？
外部类numberCircle画圆，前后扩展确保数字在中间。

【解决方案3】：

如果你愿意接受 jQuery 的解决方案，你可以试试这个。所有圆圈的尺寸相同，大小根据最大的内容进行调整。

$(window).on('load', function (){
    var biggestElement = 0;
    $('.circle').each(function (){
        if(biggestElement < $(this).outerWidth()){
            biggestElement = $(this).outerWidth();
        }
    });
    $('.circle').css({
        width: biggestElement,
        height: biggestElement,
        'line-height': biggestElement+'px'
    });
});

div{
    border:1px solid red;
    display: inline-block;
    border-radius:50%;
    text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script>
<div class="circle">10000000</div>
<div class="circle">1</div>
<div class="circle">888</div>

【讨论】：