Proportional Circles with any amount of text

[ben_jammin]

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”)

[Alen]

There might be some code missing?

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

[ben_jammin]

Added a link to a Codepen above.

[boodaah]

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.

[Author]

Posts