Geek asks and answers

CSS Vertical: Medium not working in IE7

I have this 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'm trying to do is vertically align the image inside three divs, the code above works in every browser except IE7 ... did anyone get any ideas how to fix it?

+3
source share
2 answers

I hope this helps solve your problem (some cheats for IE 7 at the bottom of the article)

Vertical center with multiline text.

Sample 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

 vertical-align:middle;
  • parentNode.offsetHeight/2 - determines the height of the container and divides it by 2. This gives us an advantage in accuracy by half the height of the screen.
  • -(parseInt(offsetHeight)/2)) - determines the height of the centering block.
+10
source

div ( 200 ), :

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

: : http://jsfiddle.net/MUrbL/

+3

More articles:


All Articles