4

JavaScript を使用して、流体コンテナー内の子 div を垂直方向に中央揃えにしています。親コンテナーの高さと子 div の高さを計算することで、基本的にこれを実現します。次に、高さに基づいて、親 div の中央に子 div を絶対に配置します。私が経験している問題は、ページが読み込まれるときに、子 div の位置が設定されないことです。これから関数を作成し、ウィンドウのサイズが変更されたときにそれを呼び出して、ビューポートが変更されたときに動的に再計算されるようにします。ページの読み込み時にこの位置を最初に設定するにはどうすればよいですか?

<div class="lead">
    <div class="message"></div>
</div>

var homepageLead = function () {
var lead = $('.lead'),
    message = $('.message'),
    lead_height = lead.height(),
    message_height = message.height(),
    lead_center = .5 * lead_height,
    message_center = .5 * message_height,
    center = (lead_center - message_center);    
message.css('bottom',center);
}
homepageLead();

$(window).resize(function () {
    homepageLead();
});
4

1 に答える 1

3

このフィドルを試してください: http://jsfiddle.net/nRRn6/

使用されたCSS:

html, body {
   height:100%;
}
.lead {
   width:100%;
   height:100%;
   background:red;
   position:relative;
}
.message {
   width:120px;
   height:200px;
   background:yellow;
   position:absolute;  /* <---required*/
   left:0;             /* <---required*/
   bottom:0;           /* <---required*/
}

使用されたhtml:

<div class="lead">
    <div class="message"></div>
</div>

使用されたjQuery:

var homepageLead = function () {
    var lead = $('.lead'),
        message = $('.message'),
        lead_height = lead.height(),
        message_height = message.height(),
        lead_center = .5 * lead_height,
        message_center = .5 * message_height,
        center = (lead_center - message_center);
    return message.css('bottom', center);
};

$(function () {
    $(window).resize(function () {
        homepageLead();
    }).resize();
});
于 2013-02-17T06:13:13.880 に答える