Grow your CSS skills. Land your dream job.

Proportional Circles with any amount of text

  • # March 21, 2013 at 6:12 pm

    Hi

    I am using border radius set at 50% to make proportional circles in CSS. But I get elongated circles depending on the amount of text contained within the circle. Is there a way to keep the height proportional to the width given any amount of text.

    The first promotion (25%) works fine because I have set a particular padding that works for that amount of text. But the other 3 I get elongated circles. Here is my code so far:

    thanks!

    [Codepen example](http://codepen.io/ben_jammin/pen/xHhLq “Codepen Example”)

    # March 21, 2013 at 7:02 pm

    There might be some code missing?

    Also, create a [CodePen](http://codepen.io/pen).

    # March 22, 2013 at 2:33 pm

    Added a link to a Codepen above.

    # March 23, 2013 at 7:32 am

    Here’s a pen with my solution
    http://cdpn.io/sJBnh

    Basically, a little jquery to size the outer divs, and nested divs with a little css to vertically center the text.

    I made another pen using .outerWidth and .outerHeight to give more padding for text, notice the long multiline text gets really close to the edges in the first example.
    http://cdpn.io/nmhoe

    The vertical centering method doesn’t work in IE8 or older.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".