2

我在搞乱大家最喜欢的 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>

这将显示一个蓝色框和一些文本，两者都垂直居中。但是如果我用&nbsp;常规空格字符替换，另一个跨度中的文本不再居中。我创建了一个JSFiddle来演示这一点。

我的问题是 - 为什么&nbsp;在第一个跨度中从一个更改为空格字符会改变第二个跨度的垂直对齐方式？

4

3 回答 3

4

您对vertical-align物业的运作方式感到困惑。它不适用于块级元素。当它设置在非表格单元格和非内联元素上时，该属性实际上应用于该元素内的所有内联文本，而不是元素本身。

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

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

解决此问题的一种简单方法是将蓝色框浮动到左侧，然后手动设置其余文本的行高。请参阅 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>​
于 2012-04-19T17:47:27.330 回答
0

可以帮忙吗？：

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

于 2012-04-19T17:51:17.813 回答
0

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

事实上，实体阻止了自动换行

在维基百科上阅读更多信息

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

于 2012-04-19T17:46:21.733 回答