デザイナーのこだわりにこたえるべくネットの海をさまよいました。
要求仕様は、ある要素内に画像とテキストがあり、それを要素内の中央に表示して欲しい。また、画像がない場合があるがその場合はテキストを要素の中央に表示して欲しいといったものでした・・・。
また面倒な・・・と思いつつgoogleでひたすら検索。やはり先人の知恵は助かります。下記サイトのコードをライブラリ化してそのまま利用させていただきました。作者の方ありがとうございました。本当に助かりました・・・。
画像やブロックの高さを考慮しながら親要素の中央に配置させるjQuery拡張
ちょうど真ん中の位置になるようにmargin-topを設定してるだけ
以下、自分用備忘録。下記のコードを「jquery.vertical.middle.js」という名前で外部ファイル化
$(function() {
$.fn.verticalMiddle = function() {
this.each(function(){
var $this = $(this);
var _height = $this.height();
var _parent_height = $this.parent().height();
$this.css('marginTop',(_parent_height/2) - (_height/2));
});
return this;
};
});
こんな感じで呼び出すようにしました。(例:クラス「contents-title」要素を縦の中央に配置する)。 横に関してはcssで調整しました。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/jquery.vertical.middle.js"></script>
<script>
$(function() {
//要素を中央に配置
$('.contents-title').verticalMiddle();
});
</script>
で、htmlを書くと・・・
<div class="sample-wrapper">
<div class="contents-title">
<img src="img/kuma2.png" width="446" height="188" alt="くまとの遭遇">
<h3>くまとの遭遇</h3>
</div>
</div>
結局何がしたかったのかっていうと、こういうこと(サンプル)がしたかったわけですよと。
サンプルを見るとわかると思うのですが、画像がある場合は画像とテキストを要素の中央に、画像がない場合はテキストが要素の中央に表示されていると思います。
何とか要求にこたえることができました。あー疲れた・・・。