CSS 垂直对齐：中间在 IE7 中不起作用

Question

我这里有这段代码...

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

这里是 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;
}

我要做的是在三个divs 内垂直对齐图像，上面的代码适用于除 IE7 之外的每个浏览器...有人知道如何修复它吗？

Answer 1

希望对解决您的问题有所帮助（文末IE 7的一些秘籍）

Vertically Center Multi-Lined Text

例如这样的代码

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

而不是

 vertical-align:middle;

1. parentNode.offsetHeight/2 - 确定容器的高度并将其除以 2。这为我们提供了正好是屏幕高度一半的边距
2. -(parseInt(offsetHeight)/2)) - 确定中心块的高度。

Answer 2

既然你知道 div 的高度（你指定它为 200px），你可以这样修复它：

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