Resizable circles with center aligned text
There is common design pattern, text in circle. Usual implementations that I saw was pretty static. Each new size was overheated with text vertical alignment.
Ideally size change should be done with one property change. It’s just a circle anyway, why so serious?
Here is pretty robust solution how to do it:
There is couple tricks behind: padding: 50% o, which stretch text node and line-height: 0, which middle aligning text. All other stuff is pretty obvious.
You’re applying font-size: 20px and receiving 20px element. That’s it.