html - Vertically align image in dynamic div -

i trying vertically align images on page have had no luck.

i need them centered text block. when page wide enough images shown next text.

link demo page: http://ruigendyk.com/static/stackoverflow/questions/1/

there's few things need do...

add following css .img-frame

height:100%; 

then following .featurette-image

position: relative; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); 

for vertical align css work need image column match height of text column, can using following script:

equalheight = function(container){ var currenttallest = 0,      currentrowstart = 0,      rowdivs = new array(),      $el,      topposition = 0;  $(container).each(function() {     $el = $(this);    $($el).height('auto')    toppostion = $el.position().top;     if (currentrowstart != toppostion) {      (currentdiv = 0 ; currentdiv < rowdivs.length ; currentdiv++) {        rowdivs[currentdiv].height(currenttallest);      }      rowdivs.length = 0; // empty array      currentrowstart = toppostion;      currenttallest = $el.height();      rowdivs.push($el);    } else {      rowdivs.push($el);      currenttallest = (currenttallest < $el.height()) ? ($el.height()) : (currenttallest);   }    (currentdiv = 0 ; currentdiv < rowdivs.length ; currentdiv++) {      rowdivs[currentdiv].height(currenttallest);    }  }); }  $(window).load(function() {   equalheight('.featurette div'); }); $(window).resize(function(){   equalheight('.featurette div'); });