如何以百分比指定行高，就像指定高度一样？答案

【问题标题】：How do I specify line-height in percentages, as I would specify height?如何以百分比指定行高，就像指定高度一样？
【发布时间】：2014-03-08 15:27:25
【问题描述】：

例如，我可以这样写：

<div id="foo">Hello</div>

还有这个：

#foo {
  display: block;
  height: 100px;
  line-height: 100px;
  text-align: center;
}

它会使#foo元素成为块级元素，高度为100px，并将Hello这个词放在div的中心。

但是如果我这样写呢：

<div id="foo">Hello</div>

还有这个：

#foo {
  display: block;
  height: 100%;
  line-height: 100%;
  text-align: center;
}

然后突然之间，line-height 停止工作，因为 CSS 处理器假定 line-height: 100% 是正常的行高，而不是元素父元素的实际高度。

那么我将如何在 line-height 中使用百分比，就像在 height 中一样？

谢谢。

【问题讨论】：

我相信 line-height 只适用于 px、em 和 pt。您可能可以使用元素高度编写脚本来获取百分比，然后转移到元素的行高。你希望它只是中间对齐吗？如果是，请检查w3schools.com/cssref/pr_pos_vertical-align.asp
你到底想达到什么效果？

【解决方案1】：

那是how the property is supposed to work。当您指定百分比line-height 时，生成的像素值是元素的计算字体大小乘以您指定的值。设置为100%与设置为1是一样的；父母不会在这里介入。

设置line-height: inherit 会将像素值设置为父元素的line-height，这可能对您有用。但是，父级（文本）的行高不一定与框模型术语中父级的高度相同。

【讨论】：