商品のサムネイルや商品名を入れたボックスを並べて、商品一覧などを作ることって結構あるのではないでしょうか。

そんなとき、写真のサイズが決まっていれば何の問題もありませんが、縦長だったり横長だったりする写真が混在するとき、それらの写真をボックスの中央に配置するのって結構面倒じゃないですか？

左右中央に配置するのは問題ありませんが、縦を中央に配置するのが結構厄介です。

そこで、そのような場合の縦位置を jQuery で中央に配置してみようという小ネタです。

今回は、jqueryVerticalMiddle.js というプラグインを用意しました。

• jqueryVerticalMiddle.js
• jqueryVerticalMiddle.jsのサンプル

使い方はサンプルのソースを見た方が早いと思いますが、念のため説明を。

ファイルの読み込み

jQuery と jqueryVerticalMiddle.js を読み込むか、以下のソースをコピペして jQuery より後で読み込んでいるJSファイルに貼り付けてください。

(function($){
 $.fn.verticalMiddle = function(options){
 var op = $.extend({
 visibility: 'visible',
 height : 9999
 }, options || {});

 $(this).each(function(){
 var h = $(this).height();
 if (h < op.height) {
 var p = (op.height - h)/2;
 $(this).css({'position':'relative','top':p});
 }
 if (op.visibility == 'hidden') {
 $(this).css('visibility','visible');
 }
 });
 };
})(jQuery);

実行する

次に、縦位置を中央に配置したい要素に対して jqueryVerticalMiddle.js を実行します。

例えば、サンプルのページでは、div.apply というボックスの高さが 300px で、その中の img要素を中央に配置するという前提になっています。そのような場合は、以下のような書き方になります。

jQuery(function($){
 $('div.apply img').verticalMiddle({height: 300});
});

オプション

height（必須）

この height オプションは必須になります。何ピクセルの高さのボックスの中央に配置するかを指定します。

（例） height: 300

visibility

このオプションは任意です。このオプションで hidden を指定すると、セレクタで指定した要素を中央に配置したあとに、その要素に対して「visibility: visible;」を設定します。

何のために使うか。

今回のように JavaScript で要素のレイアウトを調整する場合の欠点の一つとして、ユーザーがページを表示した後にレイアウトがちょこっと動いてしまうのが鬱陶しい、というのが挙げられると思います。

例えば商品一覧に jqueryVerticalMiddle.js をそのまま適用した場合、画面に商品画像が表示された後にピコピコって商品画像が下に動いてしまう可能性があるということです。

そこで、そのように動いてしまうのが嫌であれば、始めに CSS で「visibility: hidden;」を設定しておいて、レイアウトを調整し終わった後に「visibility: visible;」にしてしまおう、というときのためのオプションです。

ただし、CSS ファイルにそのまま「visibility: hidden;」を書いてしまうと、JavaScript がオフの時には商品画像が見えなくなってしまいます。

そのような状態にならないようにするためには、JavaScript がオンのときのみ「visibility: hidden;」が適用されるようにしなければなりません。なおかつ、ページが表示される前に「visibility: hidden;」にしておかないと、一旦商品画像が表示されて、すぐに消えて、再び表示されるという、かなり鬱陶しいページになってしまいます。

そのような場合の対処策の一例として、「JavaScript が ON のときだけ適用させる CSS」のように JavaScript で CSS の読み込み（link要素）自体を書き出してしまえばいいと思います。

以上です。小ネタなのに長くなってしまいました。