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 个 div，每个都包含 3 个空的内联框（跨度）：

  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.

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

4

1 回答 1

7

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-heightonspan是无用的。

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

查看vertical-align: top;文本顶部的对齐方式

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

让我们制作它们inline-block，看看它们的实际行为如何..

因此，我希望您了解所有三个示例之间的区别，但是对于您了解line-height属性和inline-block属性也是必要的，也不要忘记参考我分享的答案。

于 2013-12-20T06:42:27.293 回答