行高属性是否可以继承父Div的高度属性或其所属Div的访问高度属性？

Question

我有一个高度为50px的div,其中包含一个子div.子div的高度通过使用css属性/值对从父级继承:height:100%.

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

我想真正对齐子div中的文本,并且这样做我将line-height属性添加到子div.

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

请注意,对于行高我必须将高度明确定义为50px.

孩子DIV可以继承的高度从父属性(使用高度:100% ),但行高我必须明确设置的值？

如果是这样,这是(IMO)kindof凌乱,因为我们说,我有一个嵌套10层深的一个div,它继承了高度财产一路下滑.然后,如果我想垂直对齐此div中的文本,我不仅要将值硬编码为等于最高父div的高度,而且还要浏览我的代码以找到明确定义高度的父级.

请注意,我不想在父级别定义行高,然后在子节点使用inherit来获取值.

如果有一种方法可以将line-height设置为等于它所在的div的高度,那将是很好的.也许语法看起来如下(完全组成):

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

其中line-height使用from-property方法来访问height属性.(是的,我知道有一个方法,比如from-property引入了循环依赖的可能性,所以也许其他方式会更好.我只是用它来表达我想要的东西.)

谢谢!

一月

Answer 1

line-height设计用于设置线条之间的间距,并使用它来垂直对齐某些东西不是一个好选择.除非您确定内容总是在一行中.

使用它来使它垂直居中,但不完美.

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

Answer 2

您可以使用 jQuery 计算出高度，parent()然后根据该高度动态添加行高？

它看起来像：

$(document).ready(function(){

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

});