SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    Sep 2009
    Posts
    316
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Vertical alignment? Is it possible and should I even bother?

    I'm at a * facepalm* moment right now wondering if achieving vertical alignment in this simple scenario is even worth the trouble.

    homepage dev

    (content relates to a health organization)

    The menu is currently aligned to the top and I want it in the middle. At this point I'm just shrugging my shoulders. Do I use margin-top: 50%? If so where? And how should it be positioned? And what should be positioned if that's required? Or does "vertical-alignment" actually work for anything? Any suggestions?

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,623
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    "The menu is currently aligned at the top" may mean several things. Do you want the side menu with equal space above and below? Or do you want the menu items vertically centered? See the confusion?

  3. #3
    SitePoint Addict
    Join Date
    Sep 2009
    Posts
    316
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    "The menu is currently aligned at the top" may mean several things. Do you want the side menu with equal space above and below? Or do you want the menu items vertically centered? See the confusion?
    Sorry, I wasn't specific. I'm trying to get the top navigation (brown colored nav) to have equal space above and below and centered. Basically in the middle and centered. Any suggestions on how to do this?

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,623
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    OK, that wasn't what I assumed at first, but clear now. Hmm, it's easy to do if you just have one line of text. You just set the line height to the same height as the element (44px). So ideally the menu links would expand to the width of the text.

    With multi-line text, it's harder, but is doable. Have a look at these two demos by Rayzur:

    Vertical Aligning Text within Lists Items

    Vertical Centering Random Wrapping Text Lines

    I like the first one in particular, but it won't work in IE < 8.

    EDIT: Duh, just checked in IE7 and it does work. Trust Ray to cover all bases!

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Yes Rays methods should work fine and Gary also has a method that will work.

    Of course if only IE8+ support is required then display: table and display:table-cell method is all that's needed.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •