problem with vertical align

does vertical-align even work

[icpooreman]

Is there some trick to using vertical-align:middle; I've been trying to get it to work for a long time and I've had no success.

I have a horizontal css popout menu bar which is made from an unordered list. Is it possible to add a vertical align attribute to a list element <li> or anchor<a>. If it is possible to do so then does relative and absolute positioning play any role in whether or not it works because many of the elements need to be relatively and absolutely positioned in a particular order for the menu bar to work (although I could add wrappers and things like that to work around it).

I would just pad the top or bottom to get the same effect but much of the text in my menu bar is large enough that it needs to be on two lines meaning the large amounts of text would no longer be positioned in the center when it had to break to the next line. Any help would be greatly appreciated because I'm completely lost as to why it won't work.

[PublicSphere]

I found one way of vertically aligning centrally although it isn't very versatile:

make the line height of the li class the same as its height.

I havn't tried this on lists but it works for me on divs.

[zackattack]

Hi icpooreman

I think you will find the property vertical-align is actually meant for table cells, as far as I am aware it does not work outside of this, but would be nice if it did..

mmmn what would I do? its a little hard to tell without seeing your code but perhaps specify a height to the elements and then just use padding on the top with line height to adjust it...

I got much further with my horizontal navigations when I started to use floating for my <li></li> elements

might not be lots of help but these are some thoughts on it..

ZA

[icpooreman]

Thanks this has been a little helpful vertical-align is def just for tables because I've tried a lot of variations and it def does not work.

I tried making the line height the same as the height in my li element and that did a really good job vertically aligning the first line, however on a line break it'd double the size of my <li> although that's a good little trick if I only have one line of text.

"specify a height to the elements and then just use padding on the top with line height to adjust it... " Zack I'm a little confused as to exactly what you mean by this I was wondering if you could expand a little.

In order to use padding I'd need to know whether or not the text was long enough for a line break which I don't think is possible in css. So I'm beginning to think it's impossible to do this unless I want to manually add a class to every long piece of text in my menu bar. If anybody has another solution it would be greatly appreciated.