Как всегда держать родителя в форме круга?

В моем круге мне может потребоваться разместить номер без ограничений. для этого я пытаюсь создать div и добавил css. но не по моему ожиданию.

как сохранить мой div всегда в цирке, но все равно нет текста?

div{
  border:1px solid red;
  display: inline-block;
  border-radius:50%;
}
<div>10</div>
<div>1</div>
<div>888</div>
+2
источник поделиться
3 ответа

Это сработало для меня. Удерживая половину ширины, разрешите эту проблему

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>
0
источник
другие ответы

Связанные вопросы


Похожие вопросы

Если вы открыты для решения с помощью jQuery, вы можете попробовать это. Al кружки имеют одинаковые размеры и размер корректируется на основе самого большого контента.

$(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>
0
источник

Посмотрите другие вопросы по меткам или Задайте вопрос