0

誰かが私を正しい方向に向けることができることを願っています。

画像の高さが一貫している場合は、CSS IF を使用して行うことができます。ただし、(いつものように) 物事はそれほど単純ではなく、画像の高さはほとんどすべてのインスタンスで異なります。

画像の高さの半分の負のマージンを画像に追加して、div の中央に引き込みたいと思います。

私がそれを行う方法について何か提案はありますか？

これは機能していないようです:S

var $img = $('div#imageColumn img');
var h = $img.height();
$img.css('margin-top', + h / -2 + "px");

前もって感謝します。

4

2 に答える 2

0

このコードは SO で少し前に見つかりました。このように使用します

$(".yourclass").vAlign();

親要素の高さを計算し、それに応じて中央揃えにします。

関数：

(function ($) {
    // VERTICALLY ALIGN FUNCTION
    $.fn.vAlign = function () {
        return this.each(function (i) {
            var ah = $(this).height();
            var ph = $(this).parent().height();
            var mh = Math.ceil((ph - ah) / 2);
            if (mh > 0) {
                $(this).css('margin-top', mh);
            } else {
                $(this).css('margin-top', 0);
            }
        });
    };
})(jQuery);
于 2012-07-17T17:12:57.433 に答える
0

jQuery は必要ありません。CSS で実行できます。画像を次のように設定するだけです。

.yourDiv .yourImg{
  display: inline-block;
  vertical-align: middle;
  /* if you wonder for a maximum height just add */
  max-height: 200px;   
}

また、IE7 でインライン ブロックをサポートするためのハックが必要な場合は、 http ://www.kollerat.com/cms/index.php/Web-admin/HTML/IE7-and-inline-block.html を参照してください。

于 2012-07-17T17:33:08.423 に答える