Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › [Solved] Perfectly fit text within CSS circle

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • October 22, 2013 at 12:28 pm #153719
    Josh Johnson
    Participant

    Hey,

    What is the best way of perfectly fitting text within a circle using CSS?

    http://i.imgur.com/1q9xUPK.png

    /\ This is the problem I’m having. I think I may have to use JS to change the font size but if there is a way to achieve it with pure css, that would be good

    October 22, 2013 at 12:30 pm #153720
    Paulie_D
    Member

    Whatever the height of the div is…say 50px….use the same for the line-height (one line text only) and then text-align:center

    October 22, 2013 at 2:38 pm #153738
    chrisburton
    Participant

    Yep, Paulie is right. Match the height of the circle with the line-height. Example below.

    http://codepen.io/anon/pen/cewfA

    October 22, 2013 at 3:04 pm #153740
    Josh Johnson
    Participant

    Perfect, thanks!

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.