title: Can line-height Attribute Inherit Parent Div's Height Property Or Access Height Property Of The Div To Which It Belongs?
body: <p>I have a div with height 50px that contains a child div. The height of the child div is <em>inherited</em> from the parent by using the css attribute/value pair: <em>height: 100%</em>.</p>
  
  <pre><code>    &lt;div style="height: 50px;"&gt;
          &lt;div style="height: 100%;"&gt;Some Text&lt;/div&gt;
      &lt;/div&gt;            
  </code></pre>
  
  <p>I want to verically align the text in the child div and to do so I add the <em>line-height</em> property to the child div.</p>
  
  <pre><code>    &lt;div style="height: 50px;"&gt;
          &lt;div style="height: 100%; line-height: 50px;"&gt;Some Text&lt;/div&gt;
      &lt;/div&gt;            
  </code></pre>
  
  <p>Notice that for <em>line-height</em> I have to explicitly define the height as 50px. </p>
  
  <p>The child div can <em>inherit</em> the <em>height</em> property from the parent (using <em>height: 100%</em>) but for <em>line-height</em> I must explicitly set the value? </p>
  
  <p>If so, this is (IMO) kindof messy because let's say I have a div that is nested 10 levels deep and it <em>inherits</em> the <em>height</em> property all the way down. Then if I want to vertically align the text within this div I have to not only <em>hard-code</em> the value to equal the height of the upper-most parent div but I have <em>navigate</em> through my code to find the parent that explicitly defines the height.</p>
  
  <p><em>Note that I don't want to define line-height at the parent level and then use inherit at the child node to get the value.</em></p>
  
  <p>It would be nice if there were a way to set <em>line-height</em> equal to the height of the div that it resides in. Perhaps the syntax would look like the following (totally made up):</p>
  
  <pre><code>&lt;div style="height: 100%; line-height: from-property('height');"&gt;Some Text&lt;/div&gt;
  </code></pre>
  
  <p>Where <em>line-height</em> uses the <em>from-property</em> method to access the height property. (Yes, I know having a method such as <em>from-property</em> introduces the potential for a circular dependency so perhaps some other way would be better. I am simply using it to express what I would like to have.)</p>
  
  <p>Thanks!</p>
  
  <p>Jan</p>