Forums

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

Home Forums CSS Trying to center text in circles and make responsive

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #241522
    CodySig
    Participant

    Hello,
    I’m new to this forum but I’ve been messing around for too long now and need some help. I am trying to center these numbers in the circles and also make it responsive so it’ll always be center and the circles will be centered in the box no matter the size. Thank you!

    Here is what I have:

    https://jsfiddle.net/CodySig/kob688zr/

    #241525
    Paulie_D
    Member

    Like this?

    https://jsfiddle.net/kob688zr/1/

    The first rule for centering elements is “Don’t use floats”.

    display:inline-block with text-align:center on the parent is usually enough although I tend towards flexbox more these days.

    Since you have a defined height for the circles you can use the same value for line-height and the text will vertically center (as long as there is only one line of text as here)…again, flexbox is perhaps more modern and doesn’t care about the number of lines of text, generally.

    #241526
    CodySig
    Participant

    Thanks, looks like I have some reading to do on flexbox! But yes that did help it.

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