Vertical-align 对齐除自身以外的所有其他内容

Question

我试图了解垂直对齐的工作原理。在理解垂直对齐或“如何（不）垂直居中内容”中，它有一个<p>包含 a 的示例<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>，除了内容之外，其他所有内容都垂直对齐？<span>

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

Answer 1

这是预期的行为、错误还是其他什么？

是的，这是预期的行为。

为什么仅对 应用垂直对齐后，除了内容<span>之外，其他所有内容都垂直对齐<span>

它并不完全像那样，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。^参考号

元素的基线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 高度的一半对齐。^参考号 中间inline-block只是中间，父级的基线就像之前基于文本的一样，我们只需添加x-height 的一半。这就是为什么文本在某种程度上位于元素的中间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-height( 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>