CSS垂直对齐 - 我不理解什么？ [英] CSS vertical-alignment - what am I not understanding?

问题描述

我正在搞乱每个人最喜欢的CSS主题，垂直对齐。我发现了一个对我来说毫无意义的小例子，这可能意味着我无法理解关于CSS的一些东西。

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

 < div style =height：40px; line-height：40px; vertical -align：middle; border：1px solid blue; margin：1em 2em;> 
 < span>一些文字< / span> 
< / div> 
  

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

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

解决方案

你很困惑 vertical-align 属性是如何工作的。 它不适用于块级元素。当它设置在非表格单元格和非内联元素上时，该属性实际上应用于该元素内的所有内联文本 not 。

当您使用常规空间时，空间实际上并非由浏览器渲染，因为它不是真的内容。因此，整个文本框成为文本行（因为您将它显示为内嵌块），并且基线设置在父级的底部，并与底部的黑色边框相对应这就是为什么文本出现在那里的原因。

当你使用一个不间断的空格时，空格是内容，并且获得渲染，将文本的基线移动到文本实际出现在蓝框内的位置。它实际上并不是以文本为中心。它远没有集中在我的屏幕上。基准线刚刚基于内容移动。你会注意到这个例子，它也改变了连续文本的行高。

解决这个问题的简单方法是将蓝色框放到左侧，然后手动为其余文本设置一个行高。 查看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>一些文字可以继续，并且可以看到实际发生的情况等等等等等等等等等等等等。 
< / div> 
  

I'm messing around with everyone's favorite CSS topic, vertical alignment. I found a little case that makes no sense to me, which probably means I'm failing to understand something about CSS.

I have the following HTML (it's for exploration code, so please excuse the inline styles):

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

This displays a blue box and some text, both vertically centered. But if I replace the   with a regular space character, the text in the other span is no longer centered. I created a JSFiddle that demonstrates this.

My question is - why does changing from an   to a space character in the first span change the vertical alignment of the second span?

解决方案

You are confused how the vertical-align property works. It doesn't apply to block-level elements. When it is set on a non-table-cell and non-inline element, the property is actually applied to all the inline text inside that element, not to the element itself.

When you use a regular space, the space isn't actually "rendered" by the browser because it's not really content. Therefore, the entire box becomes the line of text (since you're displaying it as inline-block) and the baseline is set at the very bottom of the parent against the black border at the bottom, which is why the text appears way down there.

When you use a non-breaking space, the space is content and does get render, which moves the baseline for the text up to where the text would actually appear inside the blue box. It's not actually centering the text. It's nowhere near centered on my screen. The baseline has just moved based on the content. You'll notice from this example that it also changes the line-height of the continuing text.

An easy way to fix this is to float the blue box to the left and then manually set a line-height for the rest of the text to follow. 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>​

这篇关于CSS垂直对齐 - 我不理解什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！