I am trying to vertically center an image with the class .personal within a container with the class .personal-row (located inside .row-main) on page load and when resizing. Initially, I attempted using vertical-align: middle;, but that did not yield the desired result. Instead, I tried calculating the height difference between the .personal and .row-main elements, dividing it by two, and then applying this calculated padding to the top and bottom of the image. This method theoretically should have vertically aligned the image. Furthermore, I only wanted this behavior to occur at desktop screen sizes, so I included a condition for that. However, upon resizing the window, I noticed that the padding became excessively large.
Below is the code I used:
$('.personal').css({'height':((0.5*$('.jumbotron').height())+'px')});
if($(window).width() > 720){
var originalPadding = (($('.row-main').height() - $('.personal').height()) / 2);
$('.personal').css({'padding-top': originalPadding + 'px'});
$('.personal').css({'padding-bottom': originalPadding + 'px'});
}
$( window ).resize(function() {
$('.personal').css({'height':((0.5* $('.jumbotron').height()) +'px')});
//row height - image height / 2 = padding
if($(window).width() > 720){
var centeredPadding = (($('.row-main').height() - $('.personal').height()) / 2);
$('.personal').css({'margin-top': centeredPadding + 'px'});
$('.personal').css({'margin-bottom': centeredPadding + 'px'});
}
});
The logic behind my approach seems sound in theory, but it is not functioning as expected. Can anyone provide assistance?
Thank you!