垂直居中具有行高的各种大小的跨度

Question

我想更深入地了解行高的工作原理，尤其是在固定高度元素内将文本垂直居中。在下面的示例 link 中，您可以看到将 line-height 设置为等于容器的高度将使项目居中，只要所有项目的大小都相同。当您放入两个不同大小的 span 时，较大的一个将居中，而另一个则不会。我无法解释这一点，因为大元素和小元素都是分开工作的。我怎样才能使大跨度和小跨度居中（使用行高）？（为什么首先会发生这种行为？）

.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: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;
    }

JSFiddle

垂直居中具有行高的各种大小的跨度

Vertical centering various sized spans with line-height

html

css

vertical-alignment