Grow your CSS skills. Land your dream job.

How do I vertically align horizontal list items with their background

  • # June 6, 2013 at 12:48 pm

    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

    # June 6, 2013 at 1:15 pm

    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.

    # June 6, 2013 at 4:52 pm

    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)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".