我这里有这段代码...
<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;
}
我想做的是在三个 div
中垂直对齐图像,上面的代码适用于除 IE7 之外的所有浏览器...有人知道如何修复它吗?
最佳答案
希望能解决你的问题(文末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;
parentNode.offsetHeight/2
- 确定容器的高度并将其除以 2。这为我们提供了正好是屏幕高度一半的边距-(parseInt(offsetHeight)/2))
- 确定居中 block 的高度。
关于CSS 垂直对齐 :middle not working in IE7,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10484969/