0

体内にコンテナーがあり、この要素を中央揃えの垂直方向の配置に設定する必要があります。身長にも応じてこれを行い、動的に変更する必要があります。

以下のコードのようなものを試してみましたが、完全には機能せず、最も重要なのは動的ではありません。注: css でこれを行うことはできません。

var ah = $('body').height();
var ph = $('#main_container').parent().height();
var mh = Math.ceil((ph-ah) / 2);
$('#main_container').css('margin-top', mh);
4

2 に答える 2

2

resizeイベントにバインドします。

$(window).on('resize', function() {
    var $container = $('#main_container');
    var height = Math.ceil(($container.parent().height() - $('body').height()) / 2);

    $container.css({marginTop: height});
}).trigger('resize');

CSS ほどスムーズではありませんが、機能します。なんでCSSでできないの？

于 2012-08-28T20:39:24.690 に答える
1

JQuery を使用して CSS を挿入できます。

$('#main_container').css("position", "absolute");
$('#main_container').css("margin-top", "auto");
$('#main_container').css("margin-bottom", "auto");
$('#main_container').css("top", 0);
$('#main_container').css("bottom", 0);

水平方向にも中央揃えにしたい場合は、margin-topとmargin-bottom行を削除して、次を追加できます。

$('#main_container').css("margin", "auto");
$('#main_container').css("left", 0);
$('#main_container').css("right", 0);
于 2012-08-28T21:05:29.793 に答える