CSS垂直对齐和基线位置

Question

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

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

我在规范中可以找到的东西如下所示,但究竟是multiple solutions什么？任何人都可以对此有所了解吗？

In case they are aligned 'top' or 'bottom', they must be aligned so as to minimize the line box height. If such boxes are tall enough, there are multiple solutions and CSS 2.1 does not define the position of the line box's baseline.

我也创造了一个小提琴.如果您有兴趣,请在Firefox或Chrome中运行它.

Answer 1

vertical-align主要用于inline元素,例如img标记,通常设置为vertical-align: middle;在文本中正确对齐.

演示(不使用vertical-align)

演示2(使用vertical-align)

好吧,这是一个关于如何vertical-align使用值的一般概念middle.

所以,首先让我们看看vertical-align属性的有效值是什么.

^{致谢:Mozilla开发者网络}

现在,让我们一步一步解决你的疑问..

在第一个例子,按照一切都很好给你,但答案是否定的,你申请line-height到span哪些变化,但事实是line-height实际上没有应用为你的思考方式......

实际上没有应用行高

制作它inline-block并将被应用

您可以阅读此答案以获取更多信息,为什么使用line-heighton span是无用的.

继续你的第二个疑问,你有line-height第一span,第二span但不是第三个span所以这里发生了什么？由于span是inline与文本和反正line-height不会扮演的角色有我前面解释的,他们高兴地垂直文本对齐,而当你使用vertical-align: top;,它不会移动高于其他两个箱子,而是对准到最重要的文字.

了解vertical-align: top;文本顶部的对齐方式

来到你的最后一个例子,在这里,第一个span元素对齐很bottom符合市场预期,以及其正确,移动到第二个,你说这是稍微的低比第三,因为它完全不对齐,line-height是它使该元素align垂直center和最后的位置,移动了一点top,这实际上是对齐的top.

让我们来inline-block看看他们的实际表现如何......

所以我希望你们在这三个例子之间有所区别,但是你们必须了解line-height财产和inline-block财产,也不要忘记参考我分享的答案.