I have a menu as
<ul><li> that is tidily floating horizontally.
I'm then trying to center the text in it vertically (it spills over to 2 or even 3 lines sometimes).
Using the following it's working in moz/webkit, but stubbornly not in IE, it persists in aligning to the top:
display:table-cell; line-height: 1; text-align:center; vertical-align:middle;
I'm using dynamic suckerfish so am reluctant to convert it to tables - have tried it before and my lasting memory is that's not really possible (with out some really hefty hackiness), and besides it's so very anti-standards.
At the moment I've got some very yucky, hacky business to space half decently but it's still all aligning to the top - it's not satisfactory.
Any suggestions for things to try?
Basically, there's no good way to do what you want to do without using a TABLE.
Old-skool hacks for this include:
- Nowrap on your menu items, so no item is more than 2 lines (but this causes other problems)
- Absolute sizing: Set position:relative; height:100px (or whatever); font-size: 13px; line-height: 18px.
- Set a padding-top: 0.5em (or whatever) to at least give decent spacing at the top.
You know that
display:table-cell; only works in IE8 don't you?
I've had some small success setting the height of the container to twice the font size and setting line-height to 2, but that doesn't work when content wraps.
I think when I went over two lines I reverted to top alignment, so not very useful in your case.
As a side note, try changing your line-height to '1em', as I presume that's what the 1 means, but it's better to be specific and remove any vagueness. This won't solve the issue but may help further down the line. You could also try setting the height to 100% (of its parent).
build your menu item containers in such a way that you can use top and bottom padding to vertically align text..this way they will always be centred vertically no matter how many lines of text.