いろいろな企業のサイトのソースを眺めていたら、CENTER ELEMENT PLUGINなる
プラグインが気になったのでメモ。このプラグインを利用すれば簡単に要素を
センタリングすることができます。左右中央はcssで簡単にできますが、
上下中央はいろいろ大変なようなので、これに頼ってしまうのも良いかもしれません。
スマートフォン(iOS,Android)でも動作します。
CENTER ELEMENT PLUGINのダウンロードページ
・最小設定のセンタリング
利用方法は非常にシンプルで以下の様に設定するだけです。セレクタでセンタリングしたい
要素を設定し、それに対してcenterメソッドを利用するだけです。センタリングは
要素の親要素に対して行われます。以下のサンプルではbodyが親要素になっています。
センタリングのサンプル01
$("#testBox").center();
・上下(左右)のみのセンタリング
このプラグインは引数を設定することで、上下中央や左右中央のみにセンタリングすることが
できます。引数は以下の様にオブジェクトを作成し、それにプロパティを追加する形で設定
することに注意してください。以下のサンプルではhorizontal(水平方向)のプロパティを
falseにしているので、上下方向のみセンタリングされます。
他に設定できるプロパティはvertical(垂直方向)です。
上下のみのセンタリングサンプル
var argObj = new Object();
argObj.horizontal = false;
$("#testBox").center(argObj);
ネット上のサンプルでは以下の様に()内に無名Objectで設定されていることが多いです。
$("element").center({horizontal:false})
おしまい