CSS垂直对齐和基线位置

Question

CSS垂直对齐和基线位置

10

我是CSS的新手，最近在阅读规范并且在理解vertical-align属性方面遇到了一些问题。

<div style="border: 1px solid black;">
<span style="border: 1px solid red; padding-left: 1px; line-height: 30px;"></span>
<span style="border: 1px solid red; padding-left: 1px;"></span>
<span style="border: 1px solid red; padding-left: 1px; line-height: 40px;"></span>
</div>

<div style="border: 1px solid black;">
<span style="border: 1px solid red; padding-left: 1px; line-height: 30px;"></span>
<span style="border: 1px solid red; padding-left: 1px;"></span>
<span style="border: 1px solid red; padding-left: 1px; line-height: 40px; vertical-align: top"></span>
</div>

<div style="border: 1px solid black;">
<span style="border: 1px solid red; padding-left: 1px; line-height: 30px; vertical-align: bottom"></span>
<span style="border: 1px solid red; padding-left: 1px;"></span>
<span style="border: 1px solid red; padding-left: 1px; line-height: 40px; vertical-align: top"></span>
</div>

上述代码创建了3个

，每个

中都包含3个空的内联盒子（）：

在第一个
中，一切看起来都很好。所有3个都与行框的基线对齐。
在第二个
中，当我将第三个的vertical-align属性设置为top时，前两个会向上移动。我不明白它们为什么会被移动，根据什么规则。
对我来说，第三个
更加奇怪。我将第一个的vertical-align属性设置为bottom，这导致第二个比第三个略微下降（当缩放足够大时会注意到这一点）。

规范中可以找到以下内容，但是多种解决方案具体是什么？有人能详细说明吗？

如果它们对齐为“top”或“bottom”，则必须对齐以最小化行框高度。如果这些框足够高，则存在多个解决方案，CSS 2.1不定义行框基线的位置。

我还创建了一个演示。如果您感兴趣，请在Firefox或Chrome中运行它。

- Yuan Li

https://dev59.com/g2855IYBdhLWcg3waDiR - Dilish

请注意，Fiddle 的第三个示例在 IE（11）与 Chrome（31）和 Firefox（25＆26）中不同。 - ajp15243

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mr. Alien · Accepted Answer

vertical-align主要用于inline元素，例如常用的img标签，通常设置为vertical-align: middle;以便正确地在文本中对齐。

Demo（不使用vertical-align）

Demo 2（使用vertical-align）

好的，那是vertical-align使用middle值的一般概念。

因此，首先让我们看看vertical-align属性的有效值。

enter image description here ^{来源：Mozilla开发者网络}

现在，让我们逐步解决您的疑惑。

在第一个示例中，按照您的说法一切正常，但答案是否定的，您将line-height应用于span，但实际上它并没有像您想的那样应用line-height...

实际上未应用行高

将其设置为inline-block，它将被应用

您可以阅读这个答案以获取更多信息，了解在span上使用line-height是无用的原因。

接下来，您有第二个疑惑，在第一个span、第二个span上有line-height，但第三个span没有，那么这里发生了什么？由于span与文本inline，而且无论如何line-height都不会在那里起作用，因此它们与文本垂直对齐，而当您使用vertical-align: top;时，它不会将其他两个框移动到上面，而是将其与文本顶部对齐。

查看vertical-align: top;如何与文本顶部对齐

针对你提供的最后一个示例，首先第一个 span 元素的底部与预期一致地对齐了，这是正确的。接着看第二个元素，你说它比第三个元素略低，因为它根本没有对齐，line-height 是使该元素垂直 中心对齐 的属性，最后会稍微向上移动一点，实际上是与 顶部 对齐。

让我们将它们设置为 inline-block 并查看它们的实际行为..

所以，我希望你能明白这三个示例之间的区别，但你需要理解 line-height 属性和 inline-block 属性，同时也不要忘记参考我分享的答案。