Grow your CSS skills. Land your dream job.

CSS list menus- Verical Align

  • # November 25, 2008 at 5:47 pm

    CSS menus.
    I have a website I am working on.
    The menu is a list. I need to vertically align the list elements or text to the parent div. Some of the links are 2 lines and some are 1line of text.

    Example:

    Link 1 Link 2 Link 3
    3X Text

    Something like that.
    I want the text to v-align to the center of the parent div. I tried padding, that is not what I need. I need all text to align vertical. The single lines need to vertical align to the multiline links. I have had a ton of trouble trying to make this work. I got it to work in Firefox of course but completely broke in IE6 and 7 (of course). Example is here.
    http://www.dmns.org/NatureUnleashed

    Any help is much appreciated. Thanks

    # November 25, 2008 at 5:53 pm

    I use line height I find its the easiest.
    Lets say the div your list-item is in it 30px in height you put line height for the font within it at 30px this gives you the desired effect.

    # November 25, 2008 at 7:07 pm

    This might help.

    http://www.emblematiq.com/blog/vertical_align_with_css/

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".