jquery - jQueryサイクルで画像を垂直方向に中央揃えする（レスポンシブ）

Question

jQuery Cycle を使用して画像回転子を作成しようとしています。画像にはレスポンシブ サイジング コンポーネントがいくつかあります (この段階では完全にレスポンシブなサイトではありません...これはまだ開発中です)。基本的に、定義された高さのスペース内でブラウザーのサイズが大きくなるにつれて、画像を中央に配置したいと考えています (これを表示するには、大きな画面で表示する必要があります)。ローテーター機能なしで画像を垂直方向に中央に配置できますが、画像の位置を決定するjQuery関数は、ページの読み込み時とブラウザーのサイズ変更時に実行されます...画像がCycleで回転するときではありません。最初は問題ないように見えますが、ブラウザのサイズを少し変更すると、画像が下に移動するのがわかります。

これは垂直方向のセンタリングのコードです:

var imageHeight, overlap, container = $('.banner'); 

function centerImage() {
    imageHeight = container.find('img').height();
    overlap = (520 - imageHeight) / 2;
    container.find('img').css('margin-top', overlap);
}

$(window).on("load resize", centerImage); 

念のため、これは私の Cycle 関数呼び出しです。

$('#banner_items').cycle({ 
    speed:  1000,
    timeout: 3000,
    slideResize: 0,
    slideExpr: '.banner'        
}); 

サイトへのリンクは次のとおりです。 www.envisiondemo.com/planview

これを連携させる方法について何か提案はありますか?