メニュー 閉じる

ブロック要素を天地の中心に配置するjQuery


ブロック要素を左右の中心に入れるのはあまり難しくないので、CSSだけで済ませられる。
#hoge {margin: 0 auto; }
これだけだ。でも、天地の中心に入れようとすると面倒くさい。CSSだけで済まそうとすると

いろんなことが面倒なコトになる。どこでどれだけ無精をするのかというのはヒトによって違うと思うけれども、楽するために労を惜しまないフォトPとしては、jQueryでなんとかならないか考えた備忘録。

CSSを先に読み込み、 jQuery を読み込み後、こんなのを走らせる。
<script type="text/javascript">
<span style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" data-mce-type="bookmark" class="mce_SELRES_start"></span><span style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" data-mce-type="bookmark" class="mce_SELRES_start"></span>
function vcenter() {<span style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" data-mce-type="bookmark" class="mce_SELRES_start"></span>
var windowHeight = $(window).height();
var elementHeight = $("#hoge").height();
if((windowHeight - elementHeight) > 0) {
var top = (windowHeight - elementHeight) / 2;
$("#hoge").css("margin-top",top);
}else{
$("#hoge").css("margin-top",0);
}
}
$(function() {
vcenter();
});
$(window).resize(function() {
vcenter();
});
</script>

  • ウィンドウ高さと要素#hogeの高さを比較して
  • ウィンドウの方がでかいときに
  • ウィンドウ高さから要素#hogeの高さを引いた半分が要素#hogeの天のマージン
  • ウィンドウの方が小さいときは、天マージン無し

後半はおまじないで、読み込まれた時に実行し、その後はウィンドウサイズが変わったときに実行する。

レスポンシブデザインに対応している場合は、「$(window).width()」でウィンドウ幅も求めて分岐するといいかもしれない。もちろん、場合によるけど。実際には、ヘッダーやフッター等の要素をどう扱うかとかそういうことを考えるとあちこち数字を足したり引いたりすることになりそう。

created by Rinker
¥2,838 (2024/05/31 07:57:39時点 楽天市場調べ-詳細)

Posted in ウェブ関連
3 1 件の評価
Article Rating
ウォッチする
通知
0 Comments
インラインフィードバック数
すべてのコメントを表示

関連してるかもしれない記事