Vertically align image in dynamic 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/

This has been answered here, I think: http://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-div — MikeK, Jun 04 '15 at 13:34
@MikeK That only works if you are doing it inside a fixed block, which this isn't. — Tim Rideyourbike, Jun 04 '15 at 13:57

score 0 · Answer 1 · answered Jun 04 '15 at 14:03

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');
});

Vertically align image in dynamic div

1 Answers1