Question

I’m developing a horizontal family tree.

Current Step – Assigning CSS Line-Height to vertically center each item based on nested content.

Problem – The nested item’s Line-Height value grows exponentially because of inheritance.
I can make it work by assigning each value individually, but I’m looking for a dynamic solution.

View my demo code here – http://jsfiddle.net/kirtcarter/TLJT9/

Here’s the jQuery in question:

$(document).ready(function(){
    $("#familytree li").each(function(n) {
        var LineHeight = $(this).height()+'px';
        $(this).css({'line-height':LineHeight});
    });
});

Desired Result:

Answer 1

You should be doing something along these lines:

$(document).ready(function(){
    $(".item").each(function(n) {
        var newLineHeight = $(this).parent('.wrapper').height() +'px';
        $(this).css({'line-height':newLineHeight});
    });
});​