久々にjQueryでの実験サンプルを紹介。

CSSでは意外と手間がかかってしまう、
ボックス要素を、【上下左右中央】に配置する場合や【上下中央】に配置する場合。

配置する要素のpositionをabsoluteにして、
marginのtopとleftを50%にしたり、ああだこうだと面倒な物。

そんな面倒なボックスの配置をjQueryのライブラリでさっくり可能にできる
「jQuery Center plugin」がかなり便利に使えそう。

Plugins | jQuery Plugins - Center element plugin

使い方はいたって簡単。
まずjQuery本体と上記ページの【jquery.center.js(ダウンロード時はテキストファイル)】をページ内に設置。

2つのJSファイルをHTMLからリンクしたら、
配置するボックス要素に対して以下の様に指定を加えます。

◆【上下左右中央】にする場合
$(“id or class名”).center();

◆【左右中央】にする場合
$(“id or class名”).center({
vertical: false
});

◆【上下中央】にする場合
$(“id or class名”).center({
horizontal: false
});

実際にソース上に書き加える場合は
————————————–
<script type=”text/javascript”>
$(document).ready(function() {
$(“id or class名”).center();
$(“id or class名”).center({
vertical: false
});
$(“id or class名”).center({
horizontal: false
});
});
</script>
————————————–
といった具合になります。

指定するボックス要素はIDのものでもCLASSのものでも使用可能。

実際に試してみると以下の様な感じになります。

【左右中央】はこれを使う必要はないかもしれませんが、
【上下中央】及び【上下左右中央】はかなり使えそう。

たまに必要になることがある、
ページ(サイト)全体を【上下左右中央】にする場合にも
これがあれば簡単に組み込むことができそうです。

是非、ご活用下さい。。。