jQueryでセンタリング

いろいろな企業のサイトのソースを眺めていたら、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})

おしまい
 
 
 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


7 + = 十


*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>