Question

我试图了解垂直对齐的工作原理。在Understanding vertical-align, or "How (Not) To Vertically Center Content"中，有一个包含的{{1}}的示例，看起来像我期望的那样。

我搞砸了，我做到了：

<span style="display: inline-block; vertical-align: middle">

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

...但是我没想到会有这个结果（运行代码片段以查看）。为什么在仅将 Hello What in the World? 应用于vertical-align之后， else 的所有内容都垂直对齐了 的内容？

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

Answer 1

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

是的，这是预期的行为。

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

不是完全一样，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-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>

Answer 2

这不是错误。这是预期的结果。

设置了block的{{1}}或inline-block元素内的内容将对齐到顶部。

垂直对齐可对齐除自身以外的所有其他内容

2 个答案: