グラビカ学習帳～四谷のホームページ制作会社 gravity works（グラビティ・ワークス）備忘録と知識の共有と蓄積

ボックス内の要素を縦中央に揃えたい、ということは良くあると思いますが、
CSSではなかなか実現しにくいことだったりします。
（できなくはないけれど条件が厳しいとか、好ましくないタグが必要だとか）

そんな縦揃えの方法の1つとして、こちらで公開されているJSがあります。

tableを使わずにvertical-align:middle;を再現。ボックス内の画像(img)中央配置をjQueryで頑張ってみた


こちらのJSですが、

・ボックスの width、height が決まっている
・中の要素が img もしくはブロック要素

という条件で要素を縦中央に揃えることができるようです。


使用方法も詳しく説明されています。

組み込む際は、＜head＞内に記述する下記JSを修正することも忘れずに。

--------------------------------------------------------------------------------------------

<script>
$(window).bind('load',function(){
$(".vBox img").vAlign(); // 垂直水平位置を揃えたい画像を指定
});
</script>

--------------------------------------------------------------------------------------------


3行目で中央揃えを適用させたい要素を指定します。
demoデータでは＜img＞タグにのみ適用していますが、
たとえば＜p＞タグにも適用する場合は

--------------------------------------------------------------------------------------------

$(".vBox img, .vBox p").vAlign(); // 垂直水平位置を揃えたい画像を指定

--------------------------------------------------------------------------------------------


という感じで追加すればOKです。


枠のサイズさえ決まっていれば使えるため、お世話になる場面は多そうです。