html - 垂直对齐 : middle - why must the first item be aligned middle?

Question

在我的 HTML 中，我有一个 div，它有三个 div 作为子元素。我想让第二个和第三个 child (分别是文本和按钮)居中对齐。

<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>

我的 CSS

.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;
}

三个 div 是 inline-block，因此它们位于同一行。但是如果第一个 child (.someImage) 不是 vertical-align: middle，那么后面的 child 就不会居中对齐。
如果我只是将第一个切换为垂直居中对齐，那么它们就可以正常工作......有人可以向我解释一下吗？是所有子项都必须居中对齐，还是我可以让选定的子项在顶部或底部对齐？

示例未在中间对齐:http://plnkr.co/edit/1ieeKiDiGjwlQuOojQ3C?p=preview
中间对齐示例:http://plnkr.co/edit/GIHjclutVGtiIiSR305n?p=preview

Answer 1

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