How to keep always my parent as circle shape?

Question

In my circle i may require to place number without limit. for that i try to create a div and added the css. but not as per my expectaion.

how to keep my div always a cirlce, still any no.of text placed?

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

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

Possible duplicate of [How to use CSS to surround a number with a circle?](https://stackoverflow.com/questions/4861224/how-to-use-css-to-surround-a-number-with-a-circle) — Esko, Jul 18 '18 at 06:36
You can use this response, which is somewhat similar. https://stackoverflow.com/a/16615584/7041244 — Divyanshu Srivastava, Jul 18 '18 at 06:37
@Esko - the width is fixed. I am looking for any number added by dynamic to keep the shape — user2024080, Jul 18 '18 at 06:41
@user2024080 there is an answer there for that also, I just scrolled through the answers there. — Esko, Jul 18 '18 at 06:42

score 1 · Accepted Answer · answered Jul 18 '18 at 06:45

This is worked for me. Keeping the padding half of the width solve this issue

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>

score 0 · Answer 2 · answered Jul 18 '18 at 06:49

0

Like this, perhaps with a minimum width and height

.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>

answered Jul 18 '18 at 06:49

Rene Lykke Dahl

160
11

Can you explain the login behind this calculations? – user2024080 Jul 18 '18 at 06:56
the outer class numberCircle draws the circle and the before and after extension makes sure that the number is in the middle. – Rene Lykke Dahl Jul 18 '18 at 07:02

Pons Purushothaman · Answer 3 · 2018-07-18T08:14:09.873

If you are open to a solution with jQuery, You may try this. Al the circles are of same dimensions and the size is adjusted based on the biggest content.

$(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>

How to keep always my parent as circle shape?

3 Answers3