Css 垂直对齐：为什么它不适合我？

以下是html：

<div style="height: 100px">
    <span style="vertical-align:top;">top</span>
    <span style="vertical-align:bottom;">bottom</span>
</div>

顶部
底部

---

为什么

vertical align

属性在本例中不起作用？我用错了吗？

我不确定你想要实现什么

看这把小提琴：

它确实有效，但它只与它的兄弟姐妹对齐

一些调试 HTML

顶部
中间的
基线
底部

更新 如果字体更大（例如50px），您可以看得更清楚

更新 您可能想使用

display:table


然后它会达到您期望的效果
我正在尝试了解垂直对齐。我不知道它只适用于它的兄弟姐妹。@clime在我更新的答案中看到了最后一把小提琴：我想这就是你想要得到的理解，我已经得到了。但感谢您的更新。这里可能有类似的问题：这就是为什么要使用垂直对齐这也是一个很好的解释@aldanux:所以垂直对齐只适用于相邻元素？
span {
    outline: 1px solid red;
}
div {
    background: yellow;
    height: 100px;
} 

<div >
    <span style="vertical-align:top;">top</span>
    <span style="vertical-align:middle;">middle</span>
    <span style="vertical-align:baseline;">baseline</span>
    <span style="vertical-align:bottom;">bottom</span>
</div>