CSS垂直對齊：中間不能在IE7

工作，我有這段代碼在這裏...CSS垂直對齊：中間不能在IE7

<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以外的每個瀏覽器...任何人有任何想法如何解決它？

來源

2012-05-07 user979331

這是因爲'display：table-cell'在IE7中不受支持。 – Sparky

I希望這將有助於解決您的問題（在文章底部一些騙子用於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)) - 確定對中塊的高度。

來源

2012-05-07 15:48:34

完美的作品！非常感謝 – user979331

CSS表達式非常糟糕，僅供參考。 –

既然你知道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/

來源

2012-05-07 15:44:36

這不起作用，它所做的只是將圖像移動到正確位置，並將其切斷 – user979331

我已經爲您提供了一個工作示例。 –

CSS垂直對齊：中間不能在IE7

回答

相關問題