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

[rnbutler87]

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!

[Paulie_D]

Flexbox

https://codepen.io/Paulie-D/pen/mgOEjv

[rnbutler87]

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.

[Paulie_D]

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.

[rnbutler87]

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…

[rnbutler87]

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.

[Author]

Posts