I’m at a * facepalm* moment right now wondering if achieving vertical alignment in this simple scenario is even worth the trouble.
(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?
“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?
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!
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.