CSS vertical-align:middle not working in IE7

Question

I have the this piece of code here...

 <div class="pics2">

<div style="position: absolute; top: 0px; left: 0px; display: block; z-index: 4; opacity: 1; width: 225px; height: 200px;"> // this div is generated via jQuery Plugin
<div style="display:table-cell; vertical-align:middle; height:200px;">
<img src="upload/<?php echo $array['image5'] ?>" width="225" />
</div>
</div>
</div>

and here is the CSS

.pics2 {  
    padding: 0;  
    margin-left:20px auto;
    margin-right:20px auto;
    width:225px;
    height:200px;
    overflow:hidden;
        float:left;
}

.pics2 div{
    width:225px;
    height:200px;
}

.pics2 img {    
        background-color: #eee;
    margin: auto;
    display:block;
    vertical-align:middle;
}

What I am trying to do is vertically align the image inside three divs, the code above works in every single browser except IE7...any one got any ideas how to fix it?

That's because `display: table-cell` is not supported in IE7. — Sparky, May 07 '12 at 15:58

Eugene Trofimenko · Accepted Answer · 2012-05-07T15:55:15.140

10

I hope it will help to resolve your issue(Some cheats for IE 7 in the bottom of the article)

Vertically Center Multi-Lined Text

For Example code like this

margin-top: expression((parentNode.offsetHeight.offsetHeight/2)-(parseInt(this.offsetHeight)/2) <0 ? "0" :(parentNode.offsetHeight/2)-(parseInt(this.offsetHeight)/2) +'px');

instead of

 vertical-align:middle;

parentNode.offsetHeight/2 - determines the container's height and divide it by 2. This gives us a margin exactly half the height of the screen
-(parseInt(offsetHeight)/2)) - determines the height of the centering block.

edited May 07 '12 at 15:55

answered May 07 '12 at 15:48

Eugene Trofimenko

1,611
1
13
19

CSS expressions are very bad juju, just FYI. – Chris Sobolewski May 07 '12 at 16:31

Chris Sobolewski · Answer 2 · 2012-05-07T16:00:27.977

Since you know the height of the div (you are specifying it at 200px), you can fix it like this:

.container{
    position:relative;
}
.v-middle{
    position:absolute;
    top:50%;
    margin-top:-100px;
}

HTML:

<div class="pics2">

<div class="container" style="position: absolute; top: 0px; left: 0px; display: block; z-index: 4; opacity: 1; width: 225px; height: 200px;"> // this div is generated via jQuery Plugin
<div class="v-middle" style="display:table-cell; vertical-align:middle; height:200px;">
<img src="upload/<?php echo $array['image5'] ?>" width="225" />
</div>
</div>

Edit: Here is a working example: http://jsfiddle.net/MUrbL/

this did not work, all it did was move my image to right and it cuts it off — user979331, May 07 '12 at 15:51

CSS vertical-align:middle not working in IE7

2 Answers2

Linked