Streaming live at 10am (PST)

How to centre images vertically



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?


$(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);

You can also go with less-lines version:

 $(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));

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 and check a source of it wink


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.


Or do it the way I posted above stuck_out_tongue_winking_eye


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!