CSS vertical-align：中间在IE7中不起作用 [英] CSS vertical-align:middle not working in IE7

问题描述

我在这里有这段代码...

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>

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

我要做的是垂直对齐三个<$ c中的图像$ c> div s，上面的代码可在除IE7之外的所有单个浏览器中使用...任何人都知道如何修复它？

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?

推荐答案

我希望它将有助于解决您的问题（本文底部的IE 7作弊技巧）

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

垂直居中多行文本

例如这样的示例代码

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））-确定居中块的高度。

1. 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
2. -(parseInt(offsetHeight)/2)) - determines the height of the centering block.

这篇关于CSS vertical-align：中间在IE7中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！