elena 56

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?

  • Great! Thanks! It's reassuring to know that it I haven't been barking up too many wrong trees :) elena over 7 years ago

6 answers

Ellen B 35
0
points
This was chosen as the best answer

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.
Answered over 7 years ago by Ellen B
2
points

You know that display:table-cell; only works in IE8 don't you?

Answered over 7 years ago by Rich Bradshaw
1
point

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.

Answered over 7 years ago by Tony Crockford
1
point

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

Answered over 7 years ago by Edward Williams
Maak 0
0
points

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.

Answered over 7 years ago by Maak
0
points

Unitless line heights (line-height:2) are more useful.

says Eric Meyer

it's to do with computed values being passed on to descendants.

Answered over 7 years ago by Tony Crockford