Html 垂直对齐：中间-为什么第一个项目必须对齐中间？

在我的HTML中，我有一个div，它有三个div作为孩子。我希望中间有第二个和第三个孩子（这是文本和按钮）。

<div class='border'>    
    <div class='inline-block some-image'> <!-- background image here --> </div>
    <div class='inline-block description'> Some Text</div>
    <div class='inline-block button'> <button></button> </div>
<div>

三个div是内联块，因此它们保持在同一行上。但是如果第一个孩子（或某个图像）不是垂直对齐的：中间的，那么下面的孩子不会在中间对齐。 如果我只是将第一个切换到垂直对齐中间，那么它们工作得很好。。。谁能给我解释一下吗？ 是否所有的孩子都必须在中间对齐，或者我可以选择在顶部或底部对齐的？

中间未对齐的示例：

---

中间对齐的示例：

按钮、图像和描述一起对齐，而不是由其父项对齐。因此，当你在顶部对齐一个图像时，其他元素是对齐的可分离性，它们在中间对齐。所以他们工作正常

如果你看一下firsts plunker，当第一个项目与顶部对齐时，其他两个项目不会与中间对齐。也许我不明白你的答案…你应该把这些元素放在一起比较，而不是它们的父元素。“垂直对齐”不会将元素与其父元素对齐，而是将其与与当前元素内联的元素对齐。

.border {
  border: 1px solid;
}

.inline-block {
  display: inline-block;
}
.some-image {
  height: 100px;
  width: 29%;
  display: inline-block;
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  vertical-align: top;
}
.description {
  width: 25%;
  vertical-align: middle;
}
.button {
  width: 25%;
  vertical-align: middle;
}