I have fixed height divs that contain text in them. I would like the text to be vertically aligned in the middle of the div, but the problem lies in the fact that some of the text is single-line, and some splits itself over onto two lines. For IE8, Chrome and Firefox, using display: table-cell
and vertical-align: middle
provides the solution I need:
JS Fiddle is here. Take the asterisk off the width: 300px
to see the formatting when the text is on one line.
However, IE7 does not support the display: table-cell
property. The only solutions I have found to this apply only to single lines, and not to text that may be 1 or 2 lines. How can I have it display in IE7 as it does in more modern browsers, without the use of any scripts?