上下中央揃えを実現するjQueryプラグイン「niceMiddle」

僕はフロントエンドエンジニアを名乗ってるので、デザイナーからもらったデザインカンプを何とか頑張ってcssで実現しようと日々頑張ってます。

ただ、よく思う事なんですが、上下中央揃えにするケースって意外に多くありません？

元々上下中央揃えのプロパティがない（わけじゃないけど text-align:center ほど楽に使えない）から何となく「えー、まじでー。これ中央じゃないとダメ？」って思いません？僕は思います。

でも毎回そう思うのもいい加減面倒だし、それを簡単に実現できるjQueryプラグイン、その名も「ナイスミドル」を作ってみました。どうですかね。

上下中央揃えするjQueryプラグイン「ナイスミドル」をダウンロードする

デモページ

使い方

jQueryプラグインですので、まずはjQueryを読み込みましょう。

■Javascript
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>

そしてプラグインファイル本体を読み込みます。

■Javascript
<script src="./niceMiddle.js"></script>

これだけで一応使えるようになってます。

上下中央揃えしたい要素に「class=”middle”」を付与してください。

オプション

デフォルトだと親要素の高さを取得して、中央に揃えたい要素に margin-top を足す感じにしています。

これで良いケースも多いでしょうが、中には、「親要素と同じ高さにして、かつ上下中央揃えにしたい」みたいなケースもあるかと思ったので、一応オプションとして padding を追加するケースも作っておきました。

要素の高さ＋上下の padding が親要素の高さになるように計算します。

そちらを使いたい場合は別途オプション付きの指定をしてください。

■Javascript
$(function(){
  $(ele).niceMiddle({type: "padding"});
});

これで 上下に padding がついて高さが親要素と同じになります。グローバルナビとかを作る時はこっちの方が使いやすいんじゃないかなぁと勝手に思ってますがどうでしょうね。

一応以下のケースには対応してますが、「こういう時も出来るようにして」ってのがあれば教えてほしいです。

• 親要素の高さが決まってても決まってなくても揃う
• 親要素にpaddingがある場合はそのpadding無視
• 親要素と同じ高さにしたい場合はオプション付与

詳細はデモを見てください。

デモページ

上下中央揃えするjQueryプラグイン「ナイスミドル」をダウンロードする

おわりに

今回のプラグインの名前は普通に安直な感じです。「こんな恥ずかしい名前のプラグイン使えるか！！」って方は名前変えたバージョンをお渡ししますから名前の候補ください。

あとね、jQueryの正式な記述って「JQuery」だと思ってたんだけどこれ違うよね。「jQuery」だよね。

プラグインとか作ってるくせに間違えてたよｗ

誰かおしえてくださいよー(´･_･`)