Question

我希望更深入地了解行高的工作原理，特别是将文本垂直居中在固定的高度元素中。在下面的示例链接中，您可以看到将行高设置为等于容器的高度将使项目居中，只要这些项目的大小相同即可。当您放入两个不同大小的跨度时，较大的一个将居中，而另一个不会。我无法解释这一点，因为大小元素都是分开工作的。如何实现大小跨度居中（使用行高）？（为什么这种行为首先发生？）

.header {
    background: grey;
    width: 100%;
    height: 65px;
}

.big, .small {
    line-height: 65px;
}

.big {
    font-size: 1.5em;
}

<div class="header">
 <span class="big">A</span>
 <span class="small">B</span>
</div>
<br/>
<div class="header">
 <span class="small">A</span>
 <span class="small">B</span>
</div>
<br/>
<div class="header">
 <span class="big">A</span>
 <span class="big">B</span>
</div>

JS Fiddle Example

Answer 1

发生这种情况，因为默认的vertical-align是基线。如果将其切换为vertical-align：middle，则会得到预期的行为。

编辑以澄清：由于span是内联元素，因此无论您使用何种字体大小，它们都共享相同的基线。文本的垂直对齐最初是基线，但通过将其设置为中间，可以强制这些内联元素垂直对齐。

有关垂直对齐的更多信息，请访问：https://developer.mozilla.org/en/docs/Web/CSS/vertical-align

Answer 2

您需要vertical-align: middle;。默认值是基线。

.big, .small {
        line-height: 150px;
        vertical-align: middle;
    }

https://jsfiddle.net/n16vrqda/

垂直对中各种尺寸的跨度，线高

2 个答案: