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.

Answer 1

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