Streaming live at 10am (PST)

How to centre images vertically


#1

Hi,

I'm displaying 6 images in a row - one image per column.

Each image is a different height. But I'd like them to be centred vertically. Can't figure out a way to do it.

If I set the left and right margins to auto, they are centred horizontally. Is there a way to set the top and bottom margins to auto?

Thanks.


#2
<script>
$(document).ready(function() {
 containerheight = $('.container').height();

 image1height = $('.image1').height();
 new1margin = (containerheight/2) - (image1height/2);
 $('.image1').css('padding-top', new1margin);

 image2height = $('.image2').height();
 new2margin = (containerheight/2) - (image2height/2);
 $('.image2').css('padding-top', new2margin);

 image3height = $('.image3').height();
 new3margin = (containerheight/2) - (image3height/2);
 $('.image3').css('padding-top', new3margin);

 image4height = $('.image4').height();
 new4margin = (containerheight/2) - (image4height/2);
 $('.image4').css('padding-top', new4margin);

 image5height = $('.image5').height();
 new5margin = (containerheight/2) - (image5height/2);
 $('.image5').css('padding-top', new5margin);

 image6height = $('.image6').height();
 new6margin = (containerheight/2) - (image6height/2);
 $('.image6').css('padding-top', new6margin);
});
</script>

You can also go with less-lines version:

<script>
 $(document).ready(function() {
  $('.image1').css('padding-top', ($('.container').height() / 2) - ($(',image1').height() / 2));
  $('.image2').css('padding-top', ($('.container').height() / 2) - ($(',image1').height() / 2));
  $('.image3').css('padding-top', ($('.container').height() / 2) - ($(',image1').height() / 2));
  $('.image4').css('padding-top', ($('.container').height() / 2) - ($(',image1').height() / 2));
  $('.image5').css('padding-top', ($('.container').height() / 2) - ($(',image1').height() / 2));
  $('.image6').css('padding-top', ($('.container').height() / 2) - ($(',image1').height() / 2));
 });
</script>

which I'm not sure if will work. Oh and by the way it's all jQuery so you have to add a library reference. All of that code you can paste in the custom script in dashboard. Don't forget you should set the height of a container to a static value using CSS. You can take a look at http://bodyheight.webflow.com and check a source of it wink


#3

Hi guys! We do not yet support vertical centering. For the time being I'd recommend setting padding and margins manually to achieve the desired layout.


#4

Or do it the way I posted above stuck_out_tongue_winking_eye


#5

Thanks for all your help guys. The jquery is beyond my knowledge to implement, but really appreciate the advice anyway.

I found a workaround by creating transparent backgrounds on my images of different sizes. Works for now.


Some help with vertical alignment!
#6

#7