在动态div中垂直对齐图像

Question

I am trying to vertically align the images on this page but have had no luck.

I need them centered to the text block. But only when the page is wide enough that the images are shown next to the text.

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

Answer 1

There's a few things you need to do...

Add the following css to .img-frame

height:100%;

Then the following .featurette-image

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

For the vertical align css to work you then need your image column to match the height of your text column, you can do that using the 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) {
     for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
       rowDivs[currentDiv].height(currentTallest);
     }
     rowDivs.length = 0; // empty the array
     currentRowStart = topPostion;
     currentTallest = $el.height();
     rowDivs.push($el);
   } else {
     rowDivs.push($el);
     currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);
  }
   for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
     rowDivs[currentDiv].height(currentTallest);
   }
 });
}

$(window).load(function() {
  equalheight('.featurette div');
});
$(window).resize(function(){
  equalheight('.featurette div');
});