Question

我将一个简单的导航栏放在一起。最初我只想让所有链接都垂直居中，所以我使用了以下的CSS，它完成了我需要的工作：

.link {
    display: inline-block;
    line-height: 3em;
    height: 3em;
}

然后我希望我的一些链接有更大的字体大小。我通过在每个元素上设置不同的line-height和font-size属性来做到这一点，但是我确保行高度将被计算为相应于父级的3em：

.link1 {
    display: inline-block;
    font-size: 1.5em;
    line-height: 2em;
}
.link2 {
    display: inline-block;
    font-size: 2em;
    line-height: 1.5em;
}

在这样做的过程中，我注意到元素上方和下方有一些小的条带，这些元素的元素垂直偏移。

我已经创建了一个JSFiddle here来演示这个问题。我怀疑我可以使用float：left和clearfix解决这个问题，但我希望听到解决它的'正确'方法。

总而言之，我在这里想要实现的是具有相同高度但不同字体大小的div，并且文本垂直居中。

非常感谢你的帮助。

Answer 1

跨度的line-height是相等的，但默认情况下它们在文本的基线上垂直对齐。由于文本在跨度中垂直居中，因此较小文本的基线在跨度中较高。因此，当基线对齐时，较小字体的跨度顶部低于其他跨度的顶部。

如果你实际上不介意你的文字，你可以使用vertical-align: middle（或top或bottom，基本上除了默认baseline以外的任何其他内容）垂直居中。垂直居中。这可以为您提供所需的内容，但由于基线不再对齐，因此较小的文本看起来可能会“浮动”一点。

（另请注意，height属性对跨度没有影响。）

不同的行高和字体大小会导致内联块元素出现间隙

1 个答案: