Center Text block vertically according to the size of the next div

Question

My partners, I’m losing my hair with this problem I’m facing.

I have some bootsptrap pages, in which each container has a row (Row) and the same has two columns (each with the classes: col-Xs-12 col-Sm-12 col-Md-6 col-lg-6), in that the lines are alternating between text/image and image/text where the Height value used as reference is that of the image (it is usually larger than the blocks of text), in that I take the value of the image, I take the height of the block of text, subtracts and divides the value by 2 to reach the margen-top so that only then can vertically center the text blocks according to the center of the image.

I made some cats and I don’t know if that’s the logic: http://jsfiddle.net/9Lsst0gx/

The thing itself works, but the problem is that the code only works when we refresh the page, when we load it again. It doesn’t work when we first open and this is the problem as it should center as soon as the page loads.

Could someone tell me what my mistake is or if possible a way to solve it? Thank you!

Answer 1

Try to add that to the end:

$(document).ready(function() {
    WszW = $(window).width();
    gTCP(WszW);
});

If your JS is before the images or before the window size is solved, this will ensure that it updates the width at the end of the page load, and that it performs the function again, with the width set.