kingcolers
(King Colers)
October 28, 2013, 8:16pm
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.
<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
danro
(Dan Rogers)
October 29, 2013, 6:45pm
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.
Or do it the way I posted above
kingcolers
(King Colers)
November 6, 2013, 3:38pm
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.