Vertically aligning multiple lines of text in IE7

Question

I am trying to vertically align text in IE7 is proving to be a PITA without the css options of display: table; and display: table-cell;

It is for a navigation that looks similar to this:

<ul>
    <li><a href="#"><span>Text covers one line</span></a></li>
    <li><a href="#"><span>Text covers two lines, problem occurs</span></a></li>
</ul>

CSS:

ul li a{ display: table; zoom: 1; width: 240px; height: 30px;}
ul li a span{ width: 200px; display: table-cell; zoom: 1; vertical-align: middle; padding: 0 30px 0 20px; }

Works on newer browsers. I can get the text to center easily with only one line of text, but when it goes to two I can't seem to get anything working.

If closing the span properly doesn't fix it would you mind using JavaScript? That's the only way I can think of without some hacky CSS classes on each
This question may help - http://stackoverflow.com/questions/4785871/css-vertical-align — Finnnn, Sep 27 '11 at 13:34
Sorry the span was just a typo, it isn't broken in my markup. The question you posted works for a single line of text (setting the line-height to the same height of the div), but you can imagine the results when there are two lines of text... — theorise, Sep 27 '11 at 13:36
Also in response to JS, I guess I wouldn't mind using that. I'd prefer it over a huge excess of markup. — theorise, Sep 27 '11 at 13:48

score 1 · Accepted Answer · answered Sep 27 '11 at 13:46

I know there is a lot of table-hate around here (and much is clearly justified). But you must support IE7 as a requirement - clearly we're not going to be using the latest technology here.

So, if you can't get it to work with the limited set of CSS, why not just actually use a table? If you must support a browser from 2006 there will be compromises. As much as it hurts me to say this: Sometimes you've got to take a deep-breath, throw a standard out the window, and think to yourself, "If it works, it works."

Yea it sucks, thanks for the response, it may be the only non-js solution. — theorise, Sep 27 '11 at 13:49

score 1 · Answer 2 · edited May 23 '17 at 12:03

There are two solutions I am aware of, but each has its small discomfort. Please look at this demo fiddle showing both.

The first solution is based on this answer which has the downside that the clickable area is compressed to only the text, and does not extend to the list item bounds. I suppose this is not be a great problem, since users will likely click the text rather then next to it.

The second solution is based on this answer which has the downside that you need one extra element in the markup. I chose for an <ins> tag, but you can use any other inline element.

unclenorton · Answer 3 · 2011-11-03T22:47:36.557

If I understand your task correctly, there is absolutely no need in using tables. The main reason for that is that if you have a number of li elements that exceeds the width of your page, you will definitely have problems with making them wrap nicely.

So, is that what you are trying to achieve?

http://jsfiddle.net/EK357/

The solution is based on: http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

To cut it short, you have to set these rules for each li element:

li {
    display: inline-block;
    display: -moz-inline-box; /* Firefox < 3.5 */
    *display: inline; /* IE */
    zoom: 1;

    vertical-align: middle;
    margin-right: -.3em;
}

Be aware, though, that there is an extra whitespace after each inline-block element (that's what margin-left: -.3em for.

Vertically aligning multiple lines of text in IE7

3 Answers3