How to vertically align multiple images in middle inside div

Question

I am using jQuery.carouFredSel to show banners, so far it works fine except one issue i have banners of variable heights and banner in this slider always come at top if banner is smaller than other banner then i need to align it in middle middle. How can i do that

I have setup an example on fiddle http://jsfiddle.net/kzhfe/12/

carouFredSel link

I would appreciate help in this regarding. I tried several things but non of them worked

Answer 1

No need for JS here, just change display: block; float: left; to display: inline-block; vertical-align: middle: http://jsfiddle.net/kzhfe/17/

Answer 2

I add code in your example code

Here is the result : http://jsfiddle.net/sechou/kzhfe/16/

var h = $("#BannerSlider").height();
        $.map($("#BannerSlider img"), function(e){
            var top =( h- $(e).height())/2;
            $(e).css("margin-top",top);
 });