Maybe setting font-size dynamically is the right way to achieve this. But rather than width
, you can consider using height
as ratio. So calculating div
's height is probably ineluctable.
For vertical alignment, there are several solutions:
Wrap text in a span. And set the span's
display
toinline-block
. Add to the span a pseudo element of which theheight
is 100%. Setvertical-align: middle
to both span and pseudo element, as described here. Make sure that you set the parentdiv
's height, using Javascript if necessary.Set the
line-height
to the same as thediv
's height.Set both parent div and children span's
height
, anddisplay: block; margin: auto