css - 要素の垂直整列がその兄弟の整列に影響するのはなぜですか?

Question

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

div XXX と YYY は、互いに相対的に垂直方向に中央揃えされています。つまり、それらは水平線上に 1 つありますが、コンテナーに対して垂直方向に中央揃えではありません。それが私が欲しいものです。

今質問：

2 つの垂直方向の配置プロパティのいずれかを変更すると、奇妙なことが起こります。

XXX vertical-align プロパティを削除します。結果: XXX が下に移動し、何もない位置に配置されます。YYYはそのままです。
YYY vertical-align プロパティを 'top' に設定しました。YYY はその場所に残り、XXX は、それ自体の値がまだ「中間」であるにもかかわらず、YYY の上部に位置合わせされます。
YYY vertical-align プロパティを「bottom」に設定しました。YYY はその場所に残り、XXX は、それ自体の値がまだ「中間」であるにもかかわらず、YYY の下部に位置合わせされます。

行に複数のインライン要素がある場合、それらはインラインボックスの行を形成し、そのすべての垂直整列値はそのボックスに対して相対的に適用されると常に考えていました。ただし、親内のインラインボックスの行の内側、つまり、兄弟の行の内側です。

したがって、XXX プロパティを 'middle' に設定し、YYY を 'bottom' に設定すると、架空のインラインボックスのサイズと位置が変更されないため、両方が中央に設定されている場合とまったく同じになるはずです。しかし、実際には、これらのボックスの両方が垂直方向に中央に配置されていない場合、これらのボックスを垂直方向に中央揃えすることはできません。

それでは、この単純な例で何が起こっているのか説明していただけますか?

私が得られないもう 1 つのことは、この例の配置が line-height プロパティによってどのように影響を受けるかです。

答え：

残念ながら、vertical-align: middle はインライン要素を行の最大要素の中央に揃えません (ご想像のとおり)。代わりに、値 middle を指定すると、要素は架空の小文字の「x」(「x-height」とも呼ばれます) の中央に配置されます。したがって、この値が何をするのかを正しく識別するために、実際にはこの値を「text-middle」と呼ぶ必要があるように思えます。引用符

prashとbrains911の両方に感謝します。

アドバイス:

vertical-align をいじる場合は、コンテナにテキストを追加します。整列に使用されるベースラインが表示されます。