为什么元素的垂直对齐会影响其兄弟对齐？

<div class="bordered" style="height: 300px; text-align: center"> 
     <div class="bordered inline-blocked" style="height: 100px; vertical-align: middle">XXX</div> 
     <div class="bordered inline-blocked" style="height: 200px; vertical-align: middle">YYY</div> 
    </div>

Divs XXX和YYY彼此相对垂直居中，即它们在水平线上一个，但不是相对于容器垂直居中。这就是我想要的。为什么元素的垂直对齐会影响其兄弟对齐？

现在的问题：

如果我改变两个垂直对齐的属性奇怪的事情发生西港岛线之一。

我删除了XXX vertical-align属性。结果：XXX向下移动并且定位为无。 YYY保持不变。
我将YYY vertical-align属性设置为'top'。 YYY保持原位，XXX尽管自己的价值仍然“中等”，但仍与YYY的顶部一致。
我将YYY vertical-align属性设置为'bottom'。 YYY保持原位，XXX尽管自身价值仍然“中等”，但仍与YYY的底部保持一致。

我一直认为，当一行中有几个内联元素时，它们形成一行内联框，并且所有垂直对齐值都相对于该框应用，即行内框被垂直定位属性不在其父代内部，而是在父代内部的内联盒子行内，即在其兄弟姐妹行内。因此，如果我将XXX属性设置为'中间'，将YYY设置为'底部'，那么它应该与它们都设置为中间的情况完全相同，因为假想内联框的大小和位置是没有改变。但事实上，如果它们中的两个都不是垂直对齐到中间，我不能将这些框垂直居中。

那么你能解释一下这个简单例子里发生了什么吗？

我无法得到的另一件事是如何在此示例中的定位受到行高属性的影响。

答：