vertical-alignment - CSS 垂直对齐和基线位置

Question

我是 CSS 的新手，最近阅读了规范，但在理解垂直对齐属性方面遇到了一些问题。

<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 个 div，每个包含 3 个空的内联框(spans):

1. 在第一个 div 中，一切似乎都很好。所有 3 个跨度都与线框的基线对齐。
2. 在第二个 div 中，在我将第三个跨度的 vertical-align 属性设置为 top 后，前两个跨度向上移动。我从这里迷路了，我不明白为什么他们会根据什么规则被提升。
3. 第三个 div 更适合我。我将第一个跨度的 vertical-align 属性设置为 bottom，它导致第二个跨度比第三个跨度移动略低(放大到足够大时会注意到这一点)。

我在规范中找到的内容如下所述，但是多种解决方案到底是什么？谁能对此有更多的了解？

如果它们“顶部”或“底部”对齐，则它们必须对齐以最小化行框高度。如果这样的框足够高，有多种解决方案，CSS 2.1 没有定义线框基线的位置。

我还创建了一个 fiddle .如果您有兴趣，请在 Firefox 或 Chrome 中运行它。

Answer 1

vertical-align主要用于inline元素，例如img标签，一般设置为vertical-align: middle; 为了在文本中正确对齐。

Demo (不使用 vertical-align)

Demo 2 (使用 vertical-align)

好的，这就是关于 vertical-align 如何使用 middle 值的一般概念。

所以，首先让我们看看 vertical-align 的有效值是什么属性(property)。

^{致谢:Mozilla Developer Network}

现在，让我们一步步解开你的疑惑..

在第一个示例中，您认为一切都很好，但答案是否定的，您正在将 line-height 应用于变化的 span，但事实是 line-height 实际上并没有像你想象的那样应用......

Line height is actually not getting applied

Make it inline-block and it will be applied

您可以阅读 this回答更多信息，为什么在 span 上使用 line-height 是没用的。

---

继续你的第二个疑问，你在第一个 span 上有 line-height，第二个 span 但不是第三个 span 那么这里发生了什么？由于 span 是 inline 与文本，无论如何 line-height 不会像我之前解释的那样在那里发挥作用，它们很高兴垂直对齐与文本对齐，而当您使用 vertical-align: top; 时，它不会将其他两个框移动到其上方，而是对齐到文本的顶部 .

See how the vertical-align: top; aligns at the top of the text

---

来到你的最后一个例子，在这里，第一个 span 元素按预期与 bottom 对齐，这是正确的，继续第二个，你说它比第三个稍微低，因为它根本没有对齐，line-height 是它使元素 align 垂直center 和最后一点，向 top 移动了一点，实际上与 top 对齐。

Lets make them inline-block and see how they actually behave..

所以我希望你能理解这三个例子之间的区别，但你也有必要理解 line-height 属性和 inline-block 属性，也不要忘记引用我分享的答案。