CSS 垂直对齐 :middle not working in IE7

标签 css internet-explorer-7 vertical-alignment

我这里有这段代码...

 <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;
  1. parentNode.offsetHeight/2 - 确定容器的高度并将其除以 2。这为我们提供了正好是屏幕高度一半的边距
  2. -(parseInt(offsetHeight)/2)) - 确定居中 block 的高度。

关于CSS 垂直对齐 :middle not working in IE7,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10484969/

相关文章:

css - 垂直居中但嵌套在 Anchor 和 Span 中的另一种情况

html - CSS BODY 在移动设备上出乎意料地比预期更宽

javascript - 如何在单击事件的动态加载内容中绑定(bind)事件?

javascript - 使用 jQuery 淡入淡出背景图像?

html - 需要 H2 与文本一样宽,但也需要文本对齐 :center

html - Internet Explorer 7 和列表元素符号

css - IE 7/怪癖模式和背景颜色?

css - 相对定位的内联元素的负边距有时会在 IE7 中剪切字符

html - 如何在 div 中的同一基线上对齐 h2 和 p

css - 垂直对齐的 anchor 文本