css - vertical-align 对齐除 self 之外的所有其他内容

Question

我试图了解垂直对齐的工作原理。在 Understanding vertical-align, or "How (Not) To Vertically Center Content" , 它有一个 <p> 的例子其中包含 <span style="display: inline-block; vertical-align: middle">看起来就像我期望的那样。

我搞砸了，我这样做了:

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>内容？

我不想“修复”任何东西，但我想了解为什么会这样。这是预期的行为、错误还是其他原因？

Answer 1

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

是的，这是预期的行为。

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

不完全是这样，vertical-align将指定元素的对齐方式，并基于此浏览器将呈现输出。因此，您的所有元素都将对齐，而不仅仅是您认为的文本。

让我们从删除对齐开始

p {
  background: yellow
}

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

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

默认对齐方式是baseline ，所以 inline-block 的基线将与其父级的基线对齐p . ^ref .

和inline-block的基线元素由其中的文本定义 p 相同.为了更好地看到这一点，请使用不同的 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 中的文本位于同一行.

---

现在，如果您添加 vertical-align:middle您将使元素的中间与基线加上父元素 x 高度的一半对齐。 ^ref 。中间的inline-block只是中间，父级的基线就像之前基于文本的一样，我们只需添加 x 高度的一半。这就是为什么文本以某种方式位于 inline-block 中间的原因元素:

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)完全对齐

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

bottom (将元素及其子元素的底部与整行的底部对齐。)

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 (将元素及其子元素的顶部与整行的顶部对齐。)

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>