Forums

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

Home Forums CSS How do I vertically align custom bullets to the middle of the list content

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #286040
    rnbutler87
    Participant

    Hi could someone help me get the last final bit with this? Check out the codepen code. I’m just trying to get the custom bullets to vertically align with the middle of the list text, no matter how much text there is, be it 1 line or 10 lines; I always want the bullet to vertically align to the middle.

    https://codepen.io/rnbutler87/pen/BEQKvP

    Any help would be massively appreciated, thank you!

    #286041
    Paulie_D
    Member
    #286045
    rnbutler87
    Participant

    Oh thank you! I will get the hang of flexbox…

    Just one thing though, I’ve tweaked what you sent and almost achieved what I need, however how do I get the number to sit in the middle of it’s circle whilst keeping it a regular circle (and not a warped oval etc)?

    https://codepen.io/rnbutler87/pen/BEQKvP

    Thanks again Paulie_D, appreciate the help.

    #286062
    Paulie_D
    Member

    If you want a circle just set the height and width to the same value.

    Just use a proper reset and use box-sizing: border-box.

    #286079
    rnbutler87
    Participant

    Hi, thanks. I’ve got the circle its just how to get the number to sit in the middle of the circle, rather than towards the top of it…

    #286092
    rnbutler87
    Participant

    Hi, I’ve figured it out! Specifying the width and height as the same px value had to be accompanied with a bit of padding to get the circle looking like a regular circle.

    And then to get the number to site vertically and horizontally in the middle of that circle, the line-height needed adjusting. See here:

    https://codepen.io/rnbutler87/pen/BEQKvP

    Thank you again for your assistance.

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.