ブロック要素を左右の中心に入れるのはあまり難しくないので、CSSだけで済ませられる。
#hoge {margin: 0 auto; }
これだけだ。でも、天地の中心に入れようとすると面倒くさい。CSSだけで済まそうとすると
いろんなことが面倒なコトになる。どこでどれだけ無精をするのかというのはヒトによって違うと思うけれども、楽するために労を惜しまないフォトＰとしては、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()」でウィンドウ幅も求めて分岐するといいかもしれない。もちろん、場合によるけど。実際には、ヘッダーやフッター等の要素をどう扱うかとかそういうことを考えるとあちこち数字を足したり引いたりすることになりそう。
