Question

I would like to vertically align the div “.person-user” so that is vertically in the center of the parent element “.person” (The text to be in the center of the photo but to the right) How can I do this?

Thanks

http://jsfiddle.net/mpBW5/5/

Answer 1

The most precise way is to do this with jQuery and calculate it dynamically for each div. This is useful if some/all image/text divs have different heights. The example. The code:

$("div.person-user").each(function() {
    $(this).css("marginTop", function() {
        var imgH = $(this).prev("div.person-user-pic").height(),
        thisH = $(this).height(),
        h = (imgH/2) - (thisH/2);
    return h;
    });
});​

BUT: if every div and image has the same height, you could just do this:

div.person-user {margin-top: 8px;}

I hope that this answers your question?