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 horizontal list items with their background

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

    I am working on a horizontal navigation bar in which the bar is one color and all the list items have a white background. So it looks kinda like buttons without actually using images. I have successfully centered the text vertically within it’s little box. But all my little boxes are sticking to the top of the green navigation bar. I’m stumped. I’ve tried applying margins and padding to the container, the bar, the ul container, the ul the li and the a. I’ve tried both inline and floating. Nothing has any effect at pushing those little boxes down.

    What am I missing?

    I am also curious if I could center the whole ul bar across the top, but that is less essential.

    http://cdpn.io/csLIv

    #137864
    Paulie_D
    Member

    If you are going to work that way you need to work out the height of your li (or a) and add margin-top to center them inside the ul.

    For instance, if you work out the height of the li/a to be 24 px (font-size 12px, line-height: 2em) then you need 4px of top margin center it in a 32px high container.

    #117616
    dandelion
    Participant

    Oh that’s it! I specified the height of the containers, but not the li. I was only adding margin to the li without height.

    Thank you! I hope I remember this for next time!

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