I am currently working on a jQuery script that will center my images based on the text block next to them.
Since I am using foundation 5, I have to use a jQuery script to override the CSS instead of using vertical-align: middle.
The script looks like this:
$(function(){
var row = $('.row').css("height");
var center = $('.center');
center.height(row);
var centered = $('.centered');
var imgSize = parseInt(centered.css("height")) / 2;
var rowInt = parseInt(row);
var top = (rowInt / 2) - imgSize;
centered.css({"margin-top" : top + 'px'});
});
This script essentially sets the image column to match the height of the parent row, then adjusts the margin-top of the image to be half the height of the column minus half the size of the image.
While it works for the first column, it applies the same height and margin to all subsequent rows.
To see the script in action, check out this FIDDLE (make sure the jsFiddle results window is wide enough for the correct layout).
What I'm looking for is a way for the script to run on each individual row and handle any additional rows that may be added later on.
Cheers!