html - line-height属性可以继承父div的height属性还是access所属div的height属性？

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>            

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

子 div 可以继承父级的height属性(使用height: 100%)但是line-height 我必须明确设置值吗？

如果是这样，这(IMO)有点乱，因为假设我有一个嵌套 10 层深的 div，它一直继承 height 属性.然后，如果我想垂直对齐此 div 中的文本，我不仅必须硬编码该值等于最上层父 div 的高度，而且我有导航 通过我的代码找到明确定义高度的父级。

请注意，我不想在父级定义行高，然后在子节点使用继承来获取值。

如果有一种方法可以将 line-height 设置为它所在的 div 的高度，那就太好了。语法可能如下所示(完全是编造的):

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

line-height 使用 from-property 方法访问高度属性。 (是的，我知道使用诸如 from-property 之类的方法会引入循环依赖的可能性，因此也许其他方法会更好。我只是用它来表达我想要的东西。 )

谢谢!

一月

Answer 1

line-height 是用来设置行间距的，用它来垂直对齐不是一个好的选择。除非您确定内容将始终排成一行。

用这个让它垂直居中，虽然不完美。

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