Question

我有一个高度为50px的div，其中包含一个子div。通过使用css属性/值对，子div的高度从父级继承： 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>

请注意，对于 line-height ，我必须明确地将高度定义为50px。

子div可以从父级继承 height 属性（使用 height：100％），但行高我必须明确设置值吗？

如果是这样，这是（IMO）有点混乱，因为假设我有一个嵌套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");
    });

});

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

2 个答案: