7

我有一个高度为 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方法访问 height 属性。（是的，我知道使用诸如from-property之类的方法会引入循环依赖的可能性，因此也许其他方式会更好。我只是用它来表达我想要的。）

谢谢！

简

4

2 回答 2

7

line-height旨在设置行之间的间距，并使用它来垂直对齐某些东西不是一个好的选择。除非您确定内容将始终在一行中。

使用它使其垂直居中，但并不完美。

div.parent {
  display: table-cell;
  vertical-align: middle;
}
于 2012-11-12T15:58:38.373 回答
1

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

它看起来像：

$(document).ready(function(){

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

});
于 2012-11-12T15:56:16.700 回答