Html CSS垂直对齐-我不理解什么？

我正在搞乱大家最喜欢的CSS主题，垂直对齐。我发现了一个对我来说毫无意义的小案例，这可能意味着我无法理解CSS

我有以下HTML（用于探索代码，请原谅内联样式）：

一些文本

这将显示一个蓝色框和一些文本，它们都垂直居中。但是，如果我将

替换为常规空格字符，则另一个跨距中的文本将不再居中。我创建了一个示例来演示这一点

---

我的问题是-为什么在第一个跨距中从

更改为空格字符会改变第二个跨距的垂直对齐

实体

代表不间断空格，是空格字符的变体。 他们不一样

事实上，实体可防止自动换行

阅读更多关于

---

此外，空格会导致“空”跨度，这将导致“不良行为”

实体

代表不间断空格，是空格字符的变体。 他们不一样

事实上，实体可防止自动换行

阅读更多关于

---

此外，空白区域会导致“空白”跨度，这将导致“不良行为”

您不清楚

垂直对齐属性是如何工作的它不适用于块级元素。在非表格单元格和非内联元素上设置该属性时，该属性实际上应用于该元素内的所有内联文本，而不是元素本身

使用常规空间时，浏览器不会实际“渲染”该空间，因为它不是真正的内容。因此，整个框成为文本行（因为您将其显示为内联块），基线设置在父对象的最底部，与底部的黑色边框相对，这就是文本显示在最下方的原因

当您使用非中断空间时，该空间是内容空间，并且确实得到渲染，这会将文本的基线向上移动到文本实际显示在蓝色框中的位置。它实际上并没有把文本居中。它在我的屏幕上离中心很远。基线刚刚根据内容移动。您会注意到，它还会更改连续文本的行高

解决这个问题的一个简单方法是将蓝色框浮动到左侧，然后手动设置其余文本的行高


一些持续不断的文本，你可以看到这里发生了什么等等等等等等
​
您对
垂直对齐
属性的工作原理感到困惑它不适用于块级元素。在非表格单元格和非内联元素上设置该属性时，该属性实际上应用于该元素内的所有内联文本，而不是元素本身

使用常规空间时，浏览器不会实际“渲染”该空间，因为它不是真正的内容。因此，整个框成为文本行（因为您将其显示为内联块），基线设置在父对象的最底部，与底部的黑色边框相对，这就是文本显示在最下方的原因

当您使用非中断空间时，该空间是内容空间，并且确实得到渲染，这会将文本的基线向上移动到文本实际显示在蓝色框中的位置。它实际上并没有把文本居中。它在我的屏幕上离中心很远。基线刚刚根据内容移动。您会注意到，它还会更改连续文本的行高

解决这个问题的一个简单方法是将蓝色框浮动到左侧，然后手动设置其余文本的行高


一些持续不断的文本，你可以看到这里发生了什么等等等等等等
​
可能有帮助吗？：

可能会有帮助吗？：

可能是因为它是一个html实体而不是“真实空间”，也可能是因为它是一个html实体而不是div样式中的“真实空间”，所以在其中有两行高度。这是故意的吗？如果我理解正确，当样式跨度呈现内容时，它会为整个DIV设置基线。对吗？我稍微摸索了一下，设定基线比我意识到的要复杂得多。所以我想我需要对自己进行这方面的教育。@breischl:在这种特定的背景下理解起来有点复杂。基本上，您有两个内联元素，问题是它们的基线必须始终匹配。由于您将大量随机样式等应用于内联块，因此它会大量修改基线。当它里面没有内容时，它会把它弄得更糟。在你的div样式中，你有两次线高度。这是故意的吗？如果我理解正确，当样式跨度呈现内容时，它会为整个DIV设置基线。对吗？我稍微摸索了一下，设定基线比我意识到的要复杂得多。所以我想我需要对自己进行这方面的教育。@breischl:在这种特定的背景下理解起来有点复杂。基本上，您有两个内联元素，问题是它们的基线必须始终匹配。由于您将大量随机样式等应用于内联块，因此它会大量修改基线。当里面没有内容时，它会把它弄得更糟。
<div style="height: 40px; line-height: 40px; vertical-align: middle; border: 1px solid blue; margin: 1em 2em;">
    <span style="background-color: Blue; height: 30px; width: 30px; margin: 5px 1em; display:inline-block;"> </span>
    <span>Some text</span>
</div>

<div style="height: 40px; line-height: 40px; vertical-align: middle; border: 1px solid blue; margin: 1em 2em;">
    <span style="background-color: Blue; height: 30px; width: 30px; margin: 5px 1em; float: left;"></span>
    <span>Some text that continues on and on and on sothat you can see what is actually happening here blah blah blah blah blah</span>
</div>​