3

私はここにこのコードを持っています...

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

私がやろうとしているのは、画像を3div秒以内に垂直に配置することです。上記のコードは、IE7を除くすべてのブラウザで機能します...誰かがそれを修正する方法を知っていますか？

4

2 に答える 2

10

それがあなたの問題を解決するのに役立つことを願っています（記事の下部にあるIE 7のいくつかのチート）

複数行のテキストを垂直方向に中央揃え

このようなサンプルコードの場合

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))-センタリングブロックの高さを決定します。
于 2012-05-07T15:48:34.357 に答える
3

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-07T15:44:36.520 に答える