3

重複の可能性：
div内の画像の垂直方向の配置

OK、これは私がやろうとしていることです：

  • 私は空のdiv（ボックス）を持っていますが、高さはほとんどありません。
  • いくつかのコンテンツをロードするためにAJAXリクエストを作成しています。
  • コンテンツをロードする前に、典型的な「ajaxロード」回転gifで表示したいと思います。

私はなんとかした：

  • 水平方向の中央にimg配置します（で別の内部に配置divしtext-align:center;ます）

残っているもの：

  • その空のdivにある程度の高さを与えることができます。（簡単）
  • ボックスの真ん中に表示されるように、画像を垂直方向に配置します。（これを行う方法がまったくわかりません。現在、特定のボックスで機能する上限マージンを設定していますが、ボックスの高さがすでに異なる場合は機能しません...）

どうしますか？（考えられるアイデアはすべて受け入れられます。CSS/ Javascriptは何でも...）

4

4 に答える 4

2

http://jsfiddle.net/teresko/5mG2y/

基本的な考え方は、使用display: table-cell;してからvertical-align: middle;

HTML _

<div class="container">
    <div class="holder">
        <img class="stuff" src="path/to/image.png">
    </div>                
</div>

CSS：_

.container{ 
    /* the container in which image is placed */
    height:         300px;
    margin:         0 auto;
    width:          200px;
}

.holder{
    display:        table-cell;
    width:          100%;
    vertical-align: middle;
    height:         inherit;
}

.stuff{
    display:        block;
}

このように、画像の配置はコンテナの寸法に依存しません。また、水平方向の中央になるように調整することもできます。あなたがしなければならないのは追加することだけです.stuff{ margin: 0 auto;}。

于 2012-08-09T21:51:22.160 に答える
1

テーブルセルは正しい使用法ではないことを忘れないでください。テーブルセルにはテーブルデータのみが含まれている必要があるため、画像をテーブルセルとして評価する必要はありません。注意フラグを立てるだけです。セマンティクスに固執します。

他のスレッドからの回答を使用することをお勧めします。これ：

#container { position: relative; }
#container img {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: /* -1/2 the height of the image */
  margin-left: /* -1/2 the width of the image */
}

幸運を！

于 2012-08-09T21:47:06.097 に答える
1

jQueryを使用

//HTML
<div><img src="loader.gif" class="loader" alt="Loader" /></div>

//JS
$.fn.centeringIn = function(){
 var pere = this.parent();
 (pere.css("position") == 'static') ? pere.css("position","relative"):pere.css("position");
 this.css({
  'position' : 'absolute',
  'top' : ( pere.height() - this.height() )/2+'px',
  'left' : ( pere.width() - this.width() )/2+'px'
 });
}

$(document).ready( function() {
 $('.loader').centeringIn();
});
于 2012-08-09T22:10:50.227 に答える
0

画像スタイルにマージントップを追加して、divの中央に配置されるようにします。divの高さが50pxで、画像の高さが5pxだとします。次に、マージントップを20ピクセルにして、中央に配置します。

于 2012-08-09T21:45:40.940 に答える