Question

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

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

<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>

这会显示一个蓝色框和一些垂直居中的文本。但是，如果我用常规空格字符替换 ，则另一个范围中的文本不再居中。我创建了一个JSFiddle来证明这一点。

我的问题是 - 为什么在第一个范围内从 更改为空格字符会改变第二个范围的垂直对齐方式？

Answer 1

您对vertical-align属性的工作原理感到困惑。 它不适用于块级元素。当在非table-cell和非内联元素上设置时，该属性实际上应用于该元素内的所有内联文本，< em>不到元素本身。

当您使用常规空间时，浏览器实际上不会“渲染”该空间，因为它实际上并不是内容。因此，整个框成为文本行（因为您将其显示为内联块），并且基线设置在父级的最底部，而不是底部的黑色边框，这就是文本出现在那里的原因。

当您使用不间断空格时，空间是内容并且会进行渲染，这会将文本的基线移动到文本实际出现在蓝框内的位置。它实际上不是居中文本。它远不在我的屏幕中心。基线刚刚根据内容移动。你会注意到from this example它也会改变连续文本的行高。

解决此问题的一种简单方法是将蓝色框浮动到左侧，然后手动设置要跟随的其余文本的行高。 See the jsFiddle.

<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>

Answer 2

实体 代表非破坏空间，是空格char的变体。它们不一样。

实际上，实体会阻止自动换行

详情了解wikipedia

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

Answer 3

可以帮忙吗？：

http://jsfiddle.net/mFryV/18/

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

3 个答案: