Geek Answers Handbook

Can the line-height attribute Inherit Parent Div Height Property or access to the height of the Div property to which it belongs?

I have a div with a height of 50 pixels containing a child div. The height of the child div is inherited from the parent using the css: height: 100% attribute / value pair.

<div style="height: 50px;"> <div style="height: 100%;">Some Text</div> </div>

I want the text in the child div to be aligned, and for this I add the line-height property to the child div.

  <div style="height: 50px;"> <div style="height: 100%; line-height: 50px;">Some Text</div> </div>

Note that for height-line I must explicitly define the height as 50px.

A child div can inherit the height property from the parent (using height: 100%), but should I set the value explicitly for row-by-row?

If so, this (IMO) is kind of messy because they say that I have a div that is nested 10 levels and it inherits the height property all the way down. Then, if I want to vertically align the text inside this div, I need to not only hardcode the value so that it is equal to the height of the topmost parent div, but I look through my code to find the parent that explicitly determines the height.

Note that I do not want to determine the height of the row at the parent level, and then use the inheritance from the child element of the node to get the value.

It would be nice if there was a way to set the line height equal to the height of the div in which it is located. Perhaps the syntax will look like this (fully composed):

 <div style="height: 100%; line-height: from-property('height');">Some Text</div>

In cases where the row-height uses the from-property method to access the height property. (Yes, I know that a method such as from-property introduces the potential for circular dependency, so maybe some other way would be better. I just use it to express what I would like to have.)

Thanks!

Jan

+6
source share
2 answers

Can you use jQuery to generate the height of parent() and then dynamically add the height of the line based on that height?

It will look something like this:

 $(document).ready(function(){ $('.lineHeightDiv').each(function(){ var div_height = $(this).parent('div').height(); $(this).css('lineHeight', (div_height / 2) + "px"); }); });
+1
source

line-height designed to set the spacing between lines, and using it to align something vertically is not a good option. If you are not sure that the content will always be on the same line.

Use this to make it a vertical center, but not ideal.

 div.parent { display: table-cell; vertical-align: middle; }
+7
source

More articles:


All Articles