title: How can I dynamically assign css line-height to nested objects using jQuery?
body: <p>I'm developing a horizontal family tree.</p>
  
  <p><strong>Current Step</strong> - Assigning CSS Line-Height to vertically center each item based on nested content.</p>
  
  <p><strong>Problem</strong> - The nested item's Line-Height value grows exponentially because of inheritance.<br/>
  I can make it work by assigning each value individually, but I'm looking for a dynamic solution.</p>
  
  <blockquote>
    <p>View my demo code here - <a href="http://jsfiddle.net/kirtcarter/TLJT9/" rel="nofollow noreferrer">http://jsfiddle.net/kirtcarter/TLJT9/</a></p>
  </blockquote>
  
  <p>Here's the jQuery in question:<br/></p>
  
  <pre><code>$(document).ready(function(){
      $("#familytree li").each(function(n) {
          var LineHeight = $(this).height()+'px';
          $(this).css({'line-height':LineHeight});
      });
  });
  </code></pre>
  
  <p><strong>Desired Result:</strong><br/><img src="https://i.stack.imgur.com/cRwwj.jpg" alt="enter image description here"></p>