Unable to widen CSS circle/oval around number

Question

Goal: Draw green circle around a number

I want it to look like this:

Problem: It actually looks like this(It seems to take the shape of the number):

CSS:

.oval {
    background-color: #92D050;
    border-radius: 50px;
    width: 200px;
    height: 100px;
}

I've tried adjusting the width, but the width has no effect, if I take it out it looks exactly the same.

HTML:

<asp:Image ID="img2" runat="server" CssClass="professoricon"/>
<sup><asp:Label ID="L2" runat="server" Font-Size="20px" CssClass="oval"/></sup>

I used the to give the appearance that the number was slightly higher than the image.

Ive looked at other SO posts such as Circle around inline number as well as articles such as https://www.w3schools.com/howto/howto_css_circles.asp

score 1 · Accepted Answer · answered Sep 30 '20 at 23:16

Width and height will not work in your case unless you set the display property of the label.

Try adding padding to the element instead.

.oval {
    background-color: #92D050;
    border-radius: 50%;
    padding: 5px 8px;
}

Test<sup><label class="oval">2</label></sup>

score 1 · Answer 2 · answered Oct 01 '20 at 07:13

The first thing you need to know is that an asp:Label generates a <span> element in HTML if there is no AssociatedControlID property. With that property it does generate a <label> element. This is important because a span element needs display: inline-block; in css, while a label does not.

<style>
    .oval {
        border-radius: 50%;
        text-align: center;
        display: inline-block;
        background-color: #92D050;
        width: 24px;
        height: 24px;
        line-height: 20px;
        font-size: 20px;
    }
</style>

If you want a bigger circle, but the same font size, fool around with the size and line-height

width: 34px;
height: 34px;
line-height: 30px;

Unable to widen CSS circle/oval around number

2 Answers2