CSS 垂直对齐 - 我不明白什么？答案

【问题标题】：CSS vertical-alignment - what am I not understanding?CSS 垂直对齐 - 我不明白什么？
【发布时间】：2012-04-20 02:07:27
【问题描述】：

我在搞乱大家最喜欢的 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; 更改为空格字符会改变第二个跨度的垂直对齐方式？

【问题讨论】：

可能是因为它是一个html实体而不是一个“真实空间”

标签： html vertical-alignment css

【解决方案1】：

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

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

当您使用不间断空格时，空格是内容并且会进行渲染，这会将文本的基线移动到文本实际出现在蓝色框内的位置。它实际上并不是居中文本。它离我屏幕的中心很远。基线刚刚根据内容移动。您会注意到 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>

【讨论】：

在您的 div 样式中，您有两次 line-height 。这是故意的吗？
如果我理解正确，当样式化跨度呈现内容时，它会为整个 DIV 设置基线。那正确吗？我摸索了一下，设置基线比我意识到的要复杂得多。所以我想我需要对此进行自我教育。
@breischl：在这个特定的上下文中理解起来有点复杂。基本上，您有两个内联元素，问题是它们的基线必须始终匹配。由于您对内联块应用了很多随机样式等，因此它对您的基线进行了很多摆弄。当里面没有内容时，它会更加混乱。

【解决方案2】：

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

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

在wikipedia了解更多信息

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

【讨论】：

【解决方案3】：

有帮助吗？：

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

【讨论】：