关于在固定高度内使用百分比计算行高的依据属性

Question

我正在尝试使用行高垂直对齐包含 div 的文本。我觉得奇怪的是，使用百分比需要使用（相对）天文数字大的值。正如您在 this fiddle 中看到的那样，我使用 700% 将文本一直向下推到包含 div!

的底部边距

有什么解释吗？我很想知道用什么基础来计算这个百分比。使用这样的东西会破坏我的页面有什么危险吗？

<!DOCTYPE html>
<html>
<head>
<style>

h1.enormous{
    line-height: 700%;
    font-size: 2em;
}
</style>
</head>
<body>


<div style="background-color:red; width: 300px; height: 125px;">
<h1 class="enormous">VOCÊ APRENDE</h1>
</div>

</body>
</html>

Answer 1

h1.enormous{font-size: 2em; line-height: 20px; padding-top: 30%;}
.container{background-color:red; width: 300px; height: 125px;}

这应该适合你。

Answer 2

line-height 作为百分比（例如，700%）或常数（例如，7）是根据字体大小计算的。因此，以下声明 font: 12px/2 Sans-Serif 将使一行 24 像素 (2 * 12) 的文本大小为 12 像素。

对于您的示例，要使用 line-height 属性将文本放置在容器底部，您可以执行以下操作：http://jsfiddle.net/07r139tz/.

HTML:

<div class="container">
    <h1 class="enormous">VOCÊ APRENDE</h1>
</div>

CSS:

* {
    margin: 0;
    padding: 0;
    border: 0;
}

body {
    padding: 10px;
}

h1.enormous {
    font: 2em/1 Sans-Serif;
    display: inline-block;
    vertical-align: bottom;
}
.container {
    background-color:red;
    width: 300px;
    height: 125px;
    line-height: 125px;
}

关于在固定高度内使用百分比计算行高的依据属性

About the basis for calculation of line height property using percentages inside of a fixed height

html

css

vertical-alignment