How To Vertically Align Text In IE7 Without Using CSS 'table-cell' Property?

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

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

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

Answer :

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>

Solution 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

Solution 4:

You should be able to accomplish this with line-height and vertical-align: middle;.

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

h6 {
    font-size: 12px;
    line-height: 1em;
    height: 30px;
    vertical-align: middle;
}

Solution 5:

check this out

http://jsfiddle.net/CnmKN/59/

CSS Code

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

h6 {
    font-size: 12px;
    line-height: 1em;
    display: table-cell;
    vertical-align: middle;
    height:90px;
}