0

css で margin-top を変更して垂直方向に中央揃えする必要がある div があります。この div は動的になるので、避けたいと思いposition:absoluteます。

HTML:

<div class="container"> 

    <div class="exp">
        <p>content</p>

    <p>content</p>
    </div>

</div>

jQuery:

var cHeight = $('.container').height();
var expHeight - $('.exp').height();

$('.exp').css({"margin-top":10});

ただし、それをjQueryに適用する方法は言うまでもなく、親の高さを使用してdivを中央に配置するために使用されるロジックについては知りません。

JSFIDDLE

4

3 に答える 3

0

まず、var expHeight を宣言するときに構文エラーがあります ( = の代わりに - を使用しました)。

外側のコンテナー (cHeight) を測定し、内側のコンテンツの高さ (expHeight) を差し引く必要があります。これで高さの差がわかりますが、これを要素の片側 (margin-top) に適用するだけでよいので、その数値を 2 で割ります。次に、これを margin-top として設定します。

var cHeight = $('.container').height();
var expHeight = $('.exp').height(); // Fix syntax error
var mTop = (cHeight - expHeight) / 2; // subtract inner from outer and divide by 2

$('.exp').css({ marginTop: mTop  }); // set CSS

http://jsfiddle.net/t2kUG/1/

于 2013-08-01T19:38:19.050 に答える