垂直对齐可对齐除自身以外的所有其他内容 [英] Vertical-align aligns everything else except self

问题描述

我试图了解垂直对齐的工作原理.在了解垂直对齐方式，或如何(不)垂直对齐内容" ，它有一个包含<span style="display: inline-block; vertical-align: middle">的<p>的示例，看起来就像我期望的那样.

I was trying to understand how vertical-align works. In Understanding vertical-align, or "How (Not) To Vertically Center Content", it had an example with a <p> that contained a <span style="display: inline-block; vertical-align: middle"> and it looked like I'd expect it to.

我搞砸了，我做到了:

p {
  background: yellow
}

span {
  display: inline-block;
  vertical-align: middle;
  height: 50px;
  background: pink;
}

<p>
    Hello <span>What in the</span> World?
</p>

...但是我没想到会有这个结果(运行代码片段以查看).为什么仅将vertical-align应用于<span>后，所有 else 都垂直对齐，除了 <span>内容?

...but I didn't expect that result (run the snippet to see). Why is it that after applying vertical-align only to the <span>, everything else got vertically aligned except the <span> content?

我不是要修复"任何东西，但我想了解为什么会发生这种情况.这是预期的行为，错误还是其他?

I'm not looking to "fix" anything, but I'd like to understand why this happens. Is this expected behavior, a bug, or something else?

推荐答案

这是预期的行为，错误还是其他?

Is this expected behavior, a bug, or something else?

是的，这是预期的行为.

Yes it's the expected behavior.

为什么只对<span>垂直对齐后， 除了<span>内容

Why is it that after applying vertical-align only to the <span>, everything else got vertically aligned except the <span> content

并非完全如此，vertical-align将指定元素的对齐方式，并基于此浏览器将呈现输出.因此，您所有的元素都在对齐，而不仅仅是您想像的文本.

It's not exactly like that, vertical-align will specify the alignment of the elements and based on that the browser will render the output. So all your element are getting aligned and not only the text like you think.

让我们从删除对齐方式开始

Let's start by removing the alignment

p {
  background: yellow
}

span {
  display: inline-block;
  height: 50px;
  background: pink;
}

<p>
    Hello <span>What in the</span> World?
</p>

默认对齐方式为baseline，因此inline-block的基线将与其父级p的基线对齐.

The default alignment is baseline, so the baseline of the inline-block will get aligned with the baseline of its parent p.^ref.

inline-block元素的基线由其中的文本定义，与p相同.为了更好地了解这一点，请使用其他font-size.

And the baseline of inline-block element is defined by the text inside it same thing for the p. To better see this, use a different font-size.

p {
  background: 
    linear-gradient(red,red) 0 22px/100% 1px no-repeat,
    yellow
}

span {
  display: inline-block;
  height: 50px;
  font-size:25px;
  background: 
    linear-gradient(red,red) 0 22px/100% 1px no-repeat,
    pink;
}

<p>
    Hello <span>What in the</span> World?
</p>

您可以清楚地看到inline-block元素内的文本与p中的文本位于同一行.

You can clearly see that the text inside the inline-block element is at the same line of the text in p.

现在，如果添加vertical-align:middle，则将元素的中间与基线对齐，并将其与父元素的x高度对齐.

Now if you add vertical-align:middle you will align the middle of the element with the baseline plus half the x-height of the parent.^ref. The middle of the inline-block is simply the middle and the baseline of the parent is like previously based on the text and we simply add the half the x-height. That's why the text is somehow in the middle of the inline-block element:

p {
  background:
   linear-gradient(red,red) 0 calc(50% + 0.5ex) /100% 1px no-repeat, /*the baseline*/
   yellow;
  
}

span {
  display: inline-block;
  height: 100px;
  font-size:25px;
  vertical-align:middle;
  background: 
    linear-gradient(red,red) center/100% 1px no-repeat, /*the middle*/
    pink;
}

<p>
    Hello <span>What in the</span> World?
</p>

如您所见，基线略微偏离了与中间对齐的位置，因为元素的中间与基线+ x高度的一半精确对齐了(0.5ex)

As you can see the baseline is slightly miss aligned with the middle because the middle of the element is exaclty aligned with the baseline + half the x-height( 0.5ex)

您可以使用不同的值来查看结果.

You can play with different values to see the results.

bottom(将元素的底部及其后代与整个行的底部对齐.)

bottom (Aligns the bottom of the element and its descendants with the bottom of the entire line.)

p {
  background:
   yellow;
  
}

span {
  display: inline-block;
  height: 100px;
  font-size:25px;
  vertical-align:bottom;
  background: 
    pink;
}

<p>
    Hello <span>What in the</span> World?
</p>

top(将元素的顶部及其后代与整个行的顶部对齐.)

top (Aligns the top of the element and its descendants with the top of the entire line.)

p {
  background:
   yellow;
  
}

span {
  display: inline-block;
  height: 100px;
  font-size:25px;
  vertical-align:top;
  background: 
    pink;
}

<p>
    Hello <span>What in the</span> World?
</p>

这篇关于垂直对齐可对齐除自身以外的所有其他内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！