Alignment 为什么可以'；在不影响孩子们垂直排列的情况下，我不能为包装选择一个固定的高度吗？

这一直困扰着我。虽然我已经解决了使用容器填充来创建所需容器高度的问题，但我仍然不明白为什么会发生这种情况

我有一个容器，里面有两个子元素，如下所示：

<div class="container">
    <img src="http://placehold.it/30x30" id="first-item"/>
    <img src="http://placehold.it/50x50" id="second-item"/>
</div>

但是，如果为容器设置了固定高度，则垂直对齐将中断

为什么会这样？

---

如果在

高度中添加一个具有相同值的
行高度
属性，则它将起作用：

.container {
    background-color: #EADDBB;
    height: 100px; 
    line-height: 100px;
    width: 100%;
    padding: 20px 20px;
}

#first-item, #second-item {
    display: inline-block;
    vertical-align: middle;
}

演示：
感谢您提出的线条高度概念。我将使用它使我的代码更具语义。我很感激您的回答，但问题仍然存在：为什么元素不垂直对齐到容器的固定高度（没有行高）？这是因为
垂直对齐
适用于行，而不是总高度。这是元素所在的位置，与行中有文本时文本所在的位置相关。这就是为什么它有诸如
基线
，
文本顶部
，
文本底部
，等等的值。在您的回复之后，我做了更多的挖掘：“CSS中的垂直对齐属性控制一行中相邻元素的排列方式。”感谢您的帮助，Galen！
.container {
    background-color: #EADDBB;
    height: 100px; 
    line-height: 100px;
    width: 100%;
    padding: 20px 20px;
}

#first-item, #second-item {
    display: inline-block;
    vertical-align: middle;
}