How to vertically align text in IE7 without using CSS 'table-cell' property?

Question

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?

Answer 1

How about an IE7 CSS call putting position:relative on the div, and absolute on the h6, and keep the code for vertical-align for modern browsers.

http://jsfiddle.net/yap59cn3/

<!--[if IE 7]>
    <link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->

ie7.css

div
{
    /* Use inheritance, and override only the declarations needed. */
    position:relative;
}

h6
{
    height:auto; /* override inherited css */
    position:absolute;
    top:45%;
}

The goal is to make IE7 "presentable" -- no matter what you do, it will never look as pretty as a modern browser. To me, it's not worth the headache (not even a little).

Answer 2

Personally I've started to (ab)use padding to get vertical aligns. It's especially handy if you use fixed height, since you can offset the height with the value of the padding to get a perfect full-height element.

Note: This solution only works if you know what text will come in the <h6> in advance. If you dynamically add it, I'd suggest wordcounting to try to figure out if it's gonna wrap or not.

Solution:

HTML

<div>
    <h6 class="OneLineVertCentered">Here is some text. Look at this lovely text. Isn't it nice?</h6>
</div>

<div style="margin-top: 1em;"> <!-- Margin only for displaying the boxes properly -->
    <h6 class="TwoLineVertCentered">Here is some text. Look at this <br />
        lovely two-line text. Isn't it nice?</h6>
</div>

CSS

div {
    background-color: yellow;
    height: 30px;
    width: 200px;
    width: 300px;
}

h6.OneLineVertCentered,
h6.TwoLineVertCentered {
    font-size: 12px;
    line-height: 1em;
}
    h6.OneLineVertCentered {
        padding-top: 10px;
    }
    h6.TwoLineVertCentered {
        padding-top: 3px;
    }

Fiddle: http://jsfiddle.net/Snorbuckle/CnmKN/

Snippet (same as fiddle):

    div {
        background-color: yellow;
        height: 30px;
        width: 200px;
        width: 300px;
    }
    
    h6.OneLineVertCentered,
    h6.TwoLineVertCentered {
        font-size: 12px;
        line-height: 1em;
    }
        h6.OneLineVertCentered {
            padding-top: 10px;
        }
        h6.TwoLineVertCentered {
            padding-top: 3px;
        }

<div>
    <h6 class="OneLineVertCentered">Here is some text.
        Look at this lovely text. Isn't it nice?</h6>
</div>

<div style="margin-top: 1em;">
    <h6 class="TwoLineVertCentered">Here is some text. Look at this <br />
        lovely two-line text. Isn't it nice?</h6>
</div>

Answer 3

You can use a helper span element to vertical align your text like the following example:

html

<div class="container">
    <span class="aligner"></span>
    <h3>Text to be aligned center in the beloved ie7</h3>
</div> 

css

div.container {
    background-color: #000;
    color: #fff;
    height: 300px;
    width: 250px;
    position:relative;
    margin:12px auto;
    text-align:center;
}
.aligner {
    display: inline-block;
    height: 100%; 
    content: ' ';
    margin-right: -0.25em; 
    vertical-align: middle;
}
h3 {
    display: inline-block; 
    vertical-align: middle;
}

Fiddle: http://jsfiddle.net/groumisg/dbx4rr0f/

Normally, we would use a pseudo element for this, but ie7 (what a surprise!) does not support :after, :before...etc. Also, note that ie7 does not support display: inline-block for elements that are not inline by default, like div. To use display: inline-block for a div you would have to use the following hack:

div {
    display: inline-block;
    *display: inline;
    zoom: 1;
}

as suggested here Inline block doesn't work in internet explorer 7, 6