JavaScript - 2017-01-25

JQueryで可変する要素を上下中央寄せにする方法

今回は可変する要素を上下中央寄せにする方法です。
CSSでも可能ですが、今回はあえてJqueryでする方法を記載します。
自作でモーダルウインドウなどを実装する際には参考にしてください。

本文にhtmlを追加

<div id="wrap">
  <main id="indexCenter">
    <p>Dummy TextDummy TextDummy TextDummy TextDummy TextDummy Text</p>
  </main>
</div>

下記scriptをheadかbodyどちらかに追加

$(window).load(function() { 
  var ih = ($(window).height() – $("#wrap").outerHeight(true) ) /2;
  $("#indexCenter").css("margin-top", ih + "px"); });
  var timer = false; $(window).resize(function() {
    if (timer !== false) {
      clearTimeout(timer);
    }
  timer = setTimeout(function() {
    var ih = ($(window).height() – $("#wrap").outerHeight(true) ) /2;
    $("#indexCenter").css("margin-top", ih + "px");
  }, 200);
});

1, まず【#indexCenter】の高さを取得します。
2, 次に【#wrap】に【Windowの高さ】-【#indexCenterの高さ】の値を計算します。
3, 最後に取得した値÷2をしmargin-topに出力します。

Related Posts

Related Posts

JQueryでヘッダー固定時のアンカーリンク対策-レスポンシブ対応

2018-03-25

YouTube APIを使って視聴数ランキングを表示する(PHP)

2018-04-25

要素の高さをJQueryでそろえる方法

2017-01-11

新規案件のコーディング時に追加しときたいCSS

2017-01-16